Converts html select into button like elements
Switch branches/tags
Nothing to show
Latest commit 6a41a96 Jan 15, 2012
o-sam-o Merge pull request #1 from chx/master
$ is not available globally.

Select2Buttons JQuery Plugin


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.

select to buttons example


This plugin was inspired by 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">


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});


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 I suggest restyling if your going to use the plugin on a commercial site.




Sam Cavenagh (