Skip to content
Transforms a <select> containing one or more <optgroup> into two chained <select>
Branch: master
Clone or download
xavierfaucon
xavierfaucon Create README.md
Latest commit fdf70f7 Jun 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Feb 1, 2015
README.md Create README.md Jun 14, 2017
bootstrap-selectsplitter.js Update bootstrap-selectsplitter.js Sep 1, 2016
bootstrap-selectsplitter.min.js Update bootstrap-selectsplitter.min.js Sep 1, 2016
bower.json Update bower.json Jul 13, 2015

README.md

bootstrap-selectsplitter

Presentation

Transforms a <select> containing one or more <optgroup> in two chained <select>.

This:

image1

Becomes this:

image2

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.4/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 Xavier Faucon

Licensed under the MIT license.

You can’t perform that action at this time.