Create Chained Selects From Groups Of Related Options - Selectsplitter

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.