Create Chained Selects From Groups Of Related Options - Selectsplitter
File Size: | 7.51 KB |
---|---|
Views Total: | 1599 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Selectsplitter is a jQuery plugin which converts a long select element containing option groups into two chained select boxes for faster selection.
Compatible with Bootstrap 4 and Bootstrap 3 frameworks.
How to use it:
1. Load the Bootstrap's stylesheet in the head section of the webpage.
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
2. Group your options with optgroup
tags:
<select data-selectsplitter-selector> <optgroup label="JavaScript"> <option value="1">jQuery</option> <option value="2">Angular</option> <option value="3">ReactJS</option> <option value="4">VueJS</option> </optgroup> <optgroup label="HTML"> <option value="5">HTML</option> <option value="6">HTML5</option> <option value="7">XML</option> </optgroup> <optgroup label="CSS"> <option value="5">CSS2</option> <option value="6">CSS3</option> <option value="7">CSS3</option> </optgroup> </select>
3. Load the JavaScript file bootstrap-selectsplitter.min.js
after jQuery.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap-selectsplitter.min.js"></script>
4. Attach the function to the select
element and done.
$(function(){ $('select[data-selectsplitter-selector]').selectsplitter(); });
5. The chained selects should be like these:
<div class="row" data-selectsplitter-wrapper-selector=""> <div class="col-xs-12 col-sm-6"> <select class="form-control" data-selectsplitter-firstselect-selector="" size="4"> <option>JavaScript</option> <option>HTML</option> <option>CSS</option> </select> </div> <div class="col-xs-12 col-sm-6"><select class="form-control" data-selectsplitter-secondselect-selector="" size="4"></select></div> </div> <div class="col-xs-12 col-sm-6"> <select class="form-control" data-selectsplitter-secondselect-selector="" size="4"></select> </div>
Changelog:
2019-11-27
- JS update
This awesome jQuery plugin is developed by X13454. For more Advanced Usages, please check the demo page or visit the official website.