select2OptionPicker
Jquery plugin convert standard html select into list ui to picker
About
select2OptionPicker is a jQuery plugin that provides an alternative to the standard html select. The plugin converts selects into a series of li like elements, and if used correctly can provide a better visual representation of the options available to a user.
Features
- Converts normal HTML selects into button like elements (a tags)
- Supports JS change callbacks
- Supports image and color options
- Supports disabled options
- Supports disabled selects
- Supports OptGroups
- Allows no default selection
Howto
Add a standard select to the page and then make 1 jQuery call to convert it into buttons:
<select name="simple-select"> <option>One</option> <option>Two</option> <option>Three</option> </select> <script> $('select[name=simple-select]').select2OptionPicker(); </script>
When the user clicks on one of the buttons (their really links), the plugin sets that value in your select so server side your code should be exactly the same.
Image & color
<select name="adv-select" class="standard-demo"> <option data-img-src="http://i.imgur.com/fBJ88eD.png">One</option> <option data-color="#C978D7">Two</option> <option>Three</option> </select> <script> $('select[name=adv-select]').select2OptionPicker(); </script>
Javascript Callbacks
Any change events registered against the original select will also fire when the select buttons are clicked. e.g.
$('select[name=simple-select]').change(function() { alert('Changed to ' + $(this).val()); });
No Default Selection
By default the option selected in your select will be marked as selected in the buttons. However, the plugin also supports the threadless style, no default selection.
$('select[name=simple-select]').select2OptionPicker({noDefault: true});
OptGroups
The plugin understands and honors option groups. Each option group will be placed in a seperate UL and the optgroups label will be added to the page as a strong tag.
Disabling
The plugin supports disabled options and disabled selects.
Styling
The select2OptionPicker.css is provided as a guide, it's mostly copied from threadless.com. I suggest restyling if your going to use the plugin on a commercial site.
Licencing
MIT
Contact
TienNH - nguyentien8x(at)gmail.com