ZZCX_yii/backend/assets/global/plugins/bootstrap-selectsplitter

bootstrap-selectsplitter

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/bootstrap.selectsplitter/0.1.2/bootstrap-selectsplitter.min.js"></script>

##Changes 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 Xavier Faucon

Licensed under the MIT license.