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.
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.
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
|
placeholderOption | boolean |
placeholderOption - boolean
As above, but uses the first option as a placeholder
|
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.
Apply the plugin and you're good to go.
$("select").selectOrDie();
"" 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">
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">
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">
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:">
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">
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, // Option below is not needed placeholderOption: true });
or
$("select").selectOrDie(); <select data-links="true" data-placeholder-option="true">
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">
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">
$.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() ) } });
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 the SoD and remove all traces of it.
$("select").selectOrDie();
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.
$("select").selectOrDie();
If you need to disable/enable a SoD or any of its option groups/options manually, then use the disable or enable method.
$("select").selectOrDie();
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.
I'll try to keep it short.
There's probably a ton of things to do/fix, but here's a couple: