jQuery Plugin To Transform Select Options Into Labels - selectify

Selectify is a simple jQuery plugin that converts standard select options into checkable inline labels for easier selecting. Multiple select is supported as well.

See also:

• jQuery Plugin To Turn Checkboxes Into Toggle Buttons - BlueToggleButton
• jQuery Plugin To Turn Radio Buttons & Checkboxes Into Labels - zInput
• jQuery Plugin For Labeled Checkbox and Radio Button - Labelauty

How to use it:

1. Include the jQuery selectify plugin after jQuery library in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.selectify.js"></script>

2. Create a standard select as follows.

<select class="selectify" id="languages" multiple="multiple" name="languages[]">
  <option value="ruby">Ruby</option>
  <option value="javascript">Javascript</option>
  <option value="jQuery">jQuery</option>
  <option value="java">Java</option>
  <option value="php">PHP</option>
</select>

3. Initialize the plugin on document ready and we're done.

$(".selectify").selectify();

4. The sample CSS to style the labeled select options.

.select_tabs span {
  padding: 5px 8px;
  border-radius: 4px;
  margin-right: 5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  padding-left: 23px;
  border: 1px solid #e7e7e7;
  background: transparent url('images/unchecked.png') no-repeat 6px 6px;
}

.select_tabs span.active {
  border: 1px solid #d5e4ed;
  background: #d5e4ed url('images/checked.png') no-repeat 6px 6px;
}

5. Default settings.

activeClass: 'active',
inactiveClass: 'inactive',
elementType: 'span',
tabElements: [],
selectedTabs: [],
formElement: undefined,
multipleSelections: true,
onChange: function() {}

Change logs:

2015-08-12

• Fixed for select box setting

2015-08-11

• Now handles nil values nicely

2015-03-17

• Now handles nil values nicely

---

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