| 776 |
lars |
1 |
# bootstrap-selectsplitter
|
|
|
2 |
|
|
|
3 |
## Presentation
|
|
|
4 |
|
|
|
5 |
Transforms a <select> containing one or more <optgroup> in two chained <select>.
|
|
|
6 |
|
|
|
7 |
This:
|
|
|
8 |
|
|
|
9 |
|
|
|
10 |
|
|
|
11 |
Becomes this:
|
|
|
12 |
|
|
|
13 |
|
|
|
14 |
|
|
|
15 |
## Demo
|
|
|
16 |
|
|
|
17 |
See the [online demo](http://jsfiddle.net/ae7fxdyy/7/).
|
|
|
18 |
|
|
|
19 |
## How to use
|
|
|
20 |
|
|
|
21 |
Create a <select> with at least one <optgroup>:
|
|
|
22 |
|
|
|
23 |
NB: each <option> of your <select> must have a unique value.
|
|
|
24 |
|
|
|
25 |
```HTML
|
|
|
26 |
<select data-selectsplitter-selector>
|
|
|
27 |
<optgroup label="Category 1">
|
|
|
28 |
<option value="1">Choice 1</option>
|
|
|
29 |
<option value="2">Choice 2</option>
|
|
|
30 |
<option value="3">Choice 3</option>
|
|
|
31 |
<option value="4">Choice 4</option>
|
|
|
32 |
</optgroup>
|
|
|
33 |
<optgroup label="Category 2">
|
|
|
34 |
<option value="5">Choice 5</option>
|
|
|
35 |
<option value="6">Choice 6</option>
|
|
|
36 |
<option value="7">Choice 7</option>
|
|
|
37 |
<option value="8">Choice 8</option>
|
|
|
38 |
</optgroup>
|
|
|
39 |
<optgroup label="Category 3">
|
|
|
40 |
<option value="5">Choice 9</option>
|
|
|
41 |
<option value="6">Choice 10</option>
|
|
|
42 |
<option value="7">Choice 11</option>
|
|
|
43 |
<option value="8">Choice 12</option>
|
|
|
44 |
</optgroup>
|
|
|
45 |
</select>
|
|
|
46 |
```
|
|
|
47 |
|
|
|
48 |
Add the dependency files (jQuery and Bootstrap 3 CSS):
|
|
|
49 |
|
|
|
50 |
```HTML
|
|
|
51 |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
|
|
52 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
|
|
53 |
|
|
|
54 |
<script src="bootstrap-selectsplitter.js"></script>
|
|
|
55 |
```
|
|
|
56 |
|
|
|
57 |
Call the plugin:
|
|
|
58 |
```JavaScript
|
|
|
59 |
$('select[data-selectsplitter-selector]').selectsplitter();
|
|
|
60 |
```
|
|
|
61 |
|
|
|
62 |
## Bower
|
|
|
63 |
bower install bootstrap-selectsplitter
|
|
|
64 |
|
|
|
65 |
##CDN
|
|
|
66 |
|
|
|
67 |
```HTML
|
|
|
68 |
<script src="//cdn.jsdelivr.net/bootstrap.selectsplitter/0.1.2/bootstrap-selectsplitter.min.js"></script>
|
|
|
69 |
```
|
|
|
70 |
|
|
|
71 |
##Changes
|
|
|
72 |
0.1.3 : Resolves two issues with the plugin
|
|
|
73 |
- Plugin now work properly when used multiple times on the same page. ([Issue 6](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/6))
|
|
|
74 |
- Two jQuery selectors have been corrected. ([Issue 5](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/5))
|
|
|
75 |
|
|
|
76 |
0.1.2 : Option elements are now displayed by index ([Issue 3](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/3))
|
|
|
77 |
|
|
|
78 |
0.1.1 : Minimum "size" attribute for both select tags has been set to "2" ([Issue 1](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/1))
|
|
|
79 |
|
|
|
80 |
0.1.0 : Initial release
|
|
|
81 |
|
|
|
82 |
|
|
|
83 |
## Copyright and license
|
|
|
84 |
|
|
|
85 |
Copyright (C) 2015 Xavier Faucon
|
|
|
86 |
|
|
|
87 |
Licensed under the MIT license.
|
|
|
88 |
|