Convert Select Box Into A Segmented Control - Grid Picker

A simple-to-use jQuery plugin that converts a normal select box into a grid picker containing a horizontal set of selectable/unselectable toggle buttons similar to the iOS segmented control.

The goal of this plugin is to replace select boxes with a user-friendly toggle UI where users can select & deselect options just like using checkboxes or radio buttons.

How to use it:

1. Add jQuery library and the Grid picker plugin's files to the HTML page.

<link rel="stylesheet" href="/path/to/src/jquery-grid-picker.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery-grid-picker.js"></script>

2. Call the function gridPicker on the target select box and the plugin will do the rest.

<select class="select">
  <option value="ford">Ford</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="bmw">Bmw</option>
  <option value="volvo">Volvo</option>
</select>

<select class="select" multiple>
  <option value="ford">Ford</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="bmw">Bmw</option>
  <option value="volvo">Volvo</option>
</select>

$(function(){
  $(".select").gridPicker()
});

3. Determine if the options are selectable & unselectable. Can be True, False or a Function.

$(".select").gridPicker({
  canSelect: function(element) {
    return !$(element).is(":disabled");
  },
  canUnselect: function(element) {
    return typeof this._$ui.element.attr("multiple") !== "undefined";
  }
})

4. Customize the render function.

$(".select").gridPicker({
  render: function(element) {
    return $("<a />")
    .attr("href", "#")
    .attr("title", label)
    .text(label)
    .get(0);
  }
})

5. Override the default styles of the grid picker.

$(".select").gridPicker({
  canSelect: function(element) {
    return !$(element).is(":disabled");
  },
  canUnselect: function(element) {
    return typeof this._$ui.element.attr("multiple") !== "undefined";
  }
})

---

This awesome jQuery plugin is developed by fffilo. For more Advanced Usages, please check the demo page or visit the official website.