mirror of
https://github.com/janickiy/yii2-nomer
synced 2025-03-09 15:39:59 +00:00
88 lines
2.5 KiB
Markdown
88 lines
2.5 KiB
Markdown
# bootstrap-selectsplitter
|
|
|
|
## Presentation
|
|
|
|
Transforms a <select> containing one or more <optgroup> in two chained <select>.
|
|
|
|
This:
|
|
|
|
|
|
|
|
Becomes this:
|
|
|
|
|
|
|
|
## Demo
|
|
|
|
See the [online demo](http://jsfiddle.net/ae7fxdyy/7/).
|
|
|
|
## How to use
|
|
|
|
Create a <select> with at least one <optgroup>:
|
|
|
|
NB: each <option> of your <select> must have a unique value.
|
|
|
|
```HTML
|
|
<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):
|
|
|
|
```HTML
|
|
<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:
|
|
```JavaScript
|
|
$('select[data-selectsplitter-selector]').selectsplitter();
|
|
```
|
|
|
|
## Bower
|
|
bower install bootstrap-selectsplitter
|
|
|
|
##CDN
|
|
|
|
```HTML
|
|
<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](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/6))
|
|
- Two jQuery selectors have been corrected. ([Issue 5](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/5))
|
|
|
|
0.1.2 : Option elements are now displayed by index ([Issue 3](https://github.com/xavierfaucon/bootstrap-selectsplitter/issues/3))
|
|
|
|
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))
|
|
|
|
0.1.0 : Initial release
|
|
|
|
|
|
## Copyright and license
|
|
|
|
Copyright (C) 2015 Xavier Faucon
|
|
|
|
Licensed under the MIT license.
|
|
|