Select to Buttonlist

Converts a select to a buttonlist. inspired by http://jsfiddle.net/mBUgc/21/

by koshimon

HTML

<select id="test" name="test">
     <option value="val1">Option 1</option>
     <option value="val2">Option 2</option>
     <option value="val3">Option 3</option>
</select>

CSS

div.selectbtn {
  display : inline-block;
  background-color : #f9f9f9;
  border : 1px solid #ddd;
  padding : 3px 5px;
  margin-right : 5px;
  margin-bottom : 5px;
  cursor: pointer;
}
div.selectbtn.selected {
  background-color : #9bd4ef;
  border : 1px solid #000;
}

JavaScript

jQuery(document).ready(function($) {
  function ReplaceSelectWithButtons(selectField) {
    // get the basics
    var selectValue = selectField.val();
    var selectId = selectField.attr('id')
    
    // get all options and create buttons
    $(selectField).find('option').each(function() {
      if ($(this).val()) {
        var btn = $('<div data-value="' + $(this).val() + '" data-target="' + selectId  + '" class="selectbtn">' + $(this).text() + '</div>');
        if ($(this).val() == selectValue) {
          btn.addClass('selected');
        }
        btn.insertBefore(selectField);
      }
    });    
    // hide the select field
    selectField.hide();

    // map click event to buttons
    $(document).on('click', '.selectbtn', function() {
      var target = $(this).data('target');
      $('.selectbtn[data-target="' + target + '"]').removeClass('selected');
      $(this).addClass('selected');
      
      // deselect everything, select the selected :)
      var selectorAll = '#' + target + ' option';
      $(selectorAll).removeAttr('selected');
      var selectorSingle = '#' + target + ' option[value="' + $(this).data('value') + '"]';
      $(selectorSingle).attr('selected', 'selected');
      $(selectorSingle).change();
    });
  }
  
  // change selects
  ReplaceSelectWithButtons($('#test'));
});