Select2Buttons is a jQuery plugin that provides an alternative to the standard html select. The plugin converts selects into a series of button like elements, and if used correctly can provide a better visual representation of the options available to a user.
This plugin was inspired by threadless.com and a question by GreatPotato on Forrst.
- Converts normal HTML selects into button like elements (a tags)
- Supports JS change callbacks
- Supports disabled options
- Supports disabled selects
- Supports OptGroups
- Allows no default selection (like threadless)
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]').select2Buttons();
</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.
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());
});
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]').select2Buttons({noDefault: true});
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.
The plugin supports disabled options and disabled selects. See the demo for examples.
The select2Buttons.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.
MIT
Sam Cavenagh (cavenaghweb@hotmail.com)