Select2Buttons JQuery Plugin

About

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.

DEMO AVAILABLE HERE

This plugin was inspired by threadless.com and a question by GreatPotato on Forrst.

Features

• 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)

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]').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.

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]').select2Buttons({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. See the demo for examples.

Styling

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.

Licencing

MIT

Contact

Sam Cavenagh (cavenaghweb@hotmail.com)