What?

Here we go again, yet another jQuery plugin to style <select> elements. That's pretty much it. Scroll down and take a look if it might be something for you.

Config

A couple of configurable options to use with Select or Die (SoD).

Option	Type	Description
customID	string	customID - string Add a custom class to the SoD element
customClass	string	customClass - string Add a custom class to the SoD element
placeholder	string	placeholder - string Add a placeholder that's show before a selection has been made
prefix	string	prefix - string Add a prefix that's always shown before the selected option
cycle	boolean	cycle - boolean Keyboard support is always enabled, but if you set this to true the end user will be able to cycle the list of options. Example: when you've reach the bottom of the list and press the down/right arrow key it will jump back up to the first option.
links	boolean	links - boolean Treat the options as links?
linksExternal	boolean	links - boolean Treat the options as external links?
size	integer	size - integer Do you have a long list of options? Set the size to control how many options that's visible in the SoD before the need to scrol
tabindex	integer	tabindex - integer Set a custom tabindex on the SoD
onChange	function	onChange - function Provide a callback that will fire when a selection has been made

There's also a couple of public methods available, more about them in the methods section further down on the page.

Basic example

Apply the plugin and you're good to go.


                $("select").selectOrDie();

Custom class/ID

"" by default

Maybe you have multiple selects on the same page and one should look different, or whatever need you can find for a custom class/ID. In this example we're using a custom class give the SoD a different look.


                $("select").selectOrDie({
    customClass: "custom",
    customID:    "custom"
});

                or

                $("select").selectOrDie();
<select data-custom-id="custom" data-custom-class="custom">

Placeholder

null by default

If you feel like adding a placeholder that's displayed before anything is selected. Once a selection has been made the placeholder will be removed until the user clicks the SoD again, then it will be shown until the user makes a new selection or focus is lost on the SoD. The "placeholder" is given the class .sod_placeholder


                $("select").selectOrDie({
    placeholder: "Choose a number"
});

                or

                $("select").selectOrDie();
<select data-placeholder="Choose a number">

Prefix

null by default

Add a prefix that's displayed in front of the selected option. The "prefix" is given the class .sod_prefix,


                $("select").selectOrDie({
    prefix: "Number:"
});

                or

                $("select").selectOrDie();
<select data-prefix="Number:">

Keyboard cycle

false by default

When enabled it allows the user to cycle the list using his/hers arrow keys.


                $("select").selectOrDie({
    cycle: true
});

                or

                $("select").selectOrDie();
<select data-cycle="true">

Links / External links

false by default

There's two different ways of defining links. By using links the links will open in the same window/tab, if you use linksExternal the links will be opened in a new window/tab.

You can also define a specific option to act as a link by adding a data attribute to the specific option in the native select. More on that in the various section below.


                $("select").selectOrDie({
    links: true,
    placeholder: "Go to...",
    customClass: "no_highlight"
});

                or

                $("select").selectOrDie();
<select data-links="true" data-placeholder="Go to..." data-custom-class="no_highlight">

Size

0 by default

The select below consists of 10 options, but since the size is set to 4 it will only show 4 before you have to scroll (or use your up/down keys) to see the rest of the options.


                $("select").selectOrDie({
    size: 5
});

                or

                $("select").selectOrDie();
<select data-size="5">

Tabindex

0 by default

The SoD will grab the tabindex set on the native select, but you can override the default tabindex by specifying a custom one. If no tabindex is set on the native select or no custom tabindex is defined then the tabindex of the SoD will be set to 0


                $("select").selectOrDie({
    tabindex: 10
});

                or

                $("select").selectOrDie();
<select data-tabindex="10">

Callback

$.noop by default

So you want to do something after the user has made a selection? Go ahead.


                $("select").selectOrDie({
    onChange: function() { alert( $(this).val() ) }
});

Methods

These might come in handy one day. Click the different methods below to see them in action.

Method	Description
destroy	destroy Kills the SoD element and restore everything back to normal
update	update Update the SoD to reflect changes made to the native <select>
disable	disable Disable the SoD (and the native <select>), an entire option group or an option
enable	enable Enable the SoD (and the native <select>), an entire option group or an option

Destroy

Destroy the SoD and remove all traces of it.

Destroy the SoD


                $("select").selectOrDie();

Update

Lets say an option have been added to the native <select>, then you might want to update the SoD to reflect the native <select>. Then it's just a matter of running the update method and the SoD will update with the new option.

Append an option and update the SoD


                $("select").selectOrDie();

Disable / Enable

If you need to disable/enable a SoD or any of its option groups/options manually, then use the disable or enable method.

Disable the SoD Disable option "Three" Disable optgroup "Option Group Label"


                $("select").selectOrDie();

Download / Usage

Download the .zip file by clicking the download button below. Once downloaded, unzip it and include the selectordie.css and either of the two .js files found in the "_src" folder. Initialize the plugin, targeting the desired element in the jQuery selector. Just like in the basic example above. Then you're all good!

Download Fork

Various

Touch devices triggers the native select element
SoD will automatically detect a disabled <select>, the same goes for option groups and options
When in focus (the SoD gets focus when tabbing to it or clicking it) you can use your keys to "search" the SoD, just like a native <select>
Option groups (<optgroup>) are given the class .optgroup and its children the class .groupchild
Options that won't fit the width of the SoD gets automatically truncated
SoD will detect if any part of the options list is below the user viewport. If it is and it will fit above it will be shown above the SoD
You can pass a custom class or ID to individual options in the SoD by adding either data-custom-class or data-custom-id to an option in the native select
You can set a single option to act as a link without using the links option. To do so you add either data-link="true" or data-link-external="true" to the specific option in the native select. The data-link-external can also be used to open a specific link in a new window/tab even if the SoD itself is defined as internal links using the links option.
If you add the class .no_highlight as a custom class to your SoD then the default check mark highlighting the selected option will not be displayed
<label> elements targeting the native select will set focus on the SoD. Once a SoD has focus the user can press the space bar to open it or use the arrow keys to move around in the SoD. Give it a try: I'm a label for the SoD below

Compability / Misc

I'll try to keep it short.

Tested with jQuery v1.8 and jQuery v2.1 and nothing in between (it should work just fine with a version in between the tested versions). Please note that if you use jQuery 2.x IE8 will not be supported, you can read more about this over att the jQuery blog.
Tested in Firefox / Chrome / Safari / Opera / IE8+
This demo is using jQuery Litelighter by Trent Richardson. The jQuery Litelighter is NOT required by Select or Die, it's just used to format the code blocks in this demo.
Cover photo found over at New Old Stock

Todo

There's probably a ton of things to do/fix, but here's a couple:

Add support for <select multiple>
Fix typos/grammar in this demo. If you spot any, feel free to send me an email.