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 Add a custom class to the SoD element
customClass string Add a custom class to the SoD element
placeholder string Add a placeholder that's show before a selection has been made
placeholderOption boolean As above, but uses the first option as a placeholder
prefix string Add a prefix that's always shown before the selected option
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 Treat the options as links?
linksExternal boolean Treat the options as external links?
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 Set a custom tabindex on the SoD
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 to 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 - alt. 1

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">

Placeholder - alt. 2

false by default

From version v0.1.8 you can set the first <option> to be used as a placeholder. It works pretty much as the placeholder option above. The main difference is that the first <option> will not be visible in the SoD other than as a placeholder.

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

or

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

Prefix

null by default

Add a prefix that's displayed in front of the selected option. The "prefix" is given the class .sod_prefix. If a prefix is set then both the placeholder and placeholderOption options will be ignored.

$("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">

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 Kills the SoD element and restore everything back to normal
update Update the SoD to reflect changes made to the native <select>
disable Disable the SoD (and the native <select>), an entire option group or an option
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
$("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!

If you use the SoD I'd love to hear about it. Send a tweet to @mybeardandi.

Download Fork

Various

Compability / Misc

I'll try to keep it short.

Todo

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