jQuery Plugin To Transform Select Options Into Labels - selectify
File Size: | 20 KB |
---|---|
Views Total: | 2205 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.