bootstrap-selectsplitter
Looking for a maintainer! Contact me through the "Issues" of this repo.
Presentation
Transforms a <select> containing one or more <optgroup> in two chained <select>.
This:
Becomes this:
Demo
See the online demo.
How to use
Create a <select> with at least one <optgroup>:
NB: each <option> of your <select> must have a unique value.
<select data-selectsplitter-selector>
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</optgroup>
<optgroup label="Category 2">
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
<option value="8">Choice 8</option>
</optgroup>
<optgroup label="Category 3">
<option value="5">Choice 9</option>
<option value="6">Choice 10</option>
<option value="7">Choice 11</option>
<option value="8">Choice 12</option>
</optgroup>
</select>Add the dependency files (jQuery and Bootstrap 3 CSS):
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap-selectsplitter.js"></script>Call the plugin:
$('select[data-selectsplitter-selector]').selectsplitter();Bower
bower install bootstrap-selectsplitter
CDN
<script src="//cdn.jsdelivr.net/gh/X13454/[email protected]/bootstrap-selectsplitter.min.js"></script>Changes
0.1.4 : Resolves an issue when selecting a first option, then another one then selecting the first one again. (Issue 9)
0.1.3 : Resolves two issues with the plugin
- Plugin now work properly when used multiple times on the same page. (Issue 6)
- Two jQuery selectors have been corrected. (Issue 5)
0.1.2 : Option elements are now displayed by index (Issue 3)
0.1.1 : Minimum "size" attribute for both select tags has been set to "2" (Issue 1)
0.1.0 : Initial release
Copyright and license
Copyright (C) 2015
Licensed under the MIT license.