Overview
Bootstrap Selectsplitter's transforms a
<select>
containing one or more
<optgroup>
in two chained
<select>
. For full documentation please check the
plugin's repository .
Usage
Bootstrap Selectsplitter's Javascript files are bundled in the global plugin bundles and globally included in all pages:
copy
< script src = " assets/plugins/global/plugins.bundle.js" > </ script>
Example 1
Create a
<select>
with at least one
<optgroup>
. Each
<option>
of your
<select>
must have a unique value.
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Choice 10
Choice 11
Choice 12
Category 1 Category 2 Category 3
Choice 1 Choice 2 Choice 3 Choice 4
copy
$ ( "#kt_multiselectsplitter_example_1" ) . multiselectsplitter ( ) ;
< select id = " kt_multiselectsplitter_example_1" multiple = " multiple" >
< optgroup label = " Category 1" >
< option value = " 1" > Choice 1</ option>
< option value = " 2" > Choice 2</ option>
< option value = " 3" selected = " selected" > Choice 3</ option>
< option value = " 4" > Choice 4</ option>
</ optgroup>
< optgroup label = " Category 2" >
< option value = " 5" > Choice 5</ option>
< option value = " 6" selected = " selected" > Choice 6</ option>
< option value = " 7" > Choice 7</ option>
< option value = " 8" > Choice 8</ option>
</ optgroup>
< optgroup label = " Category 3" >
< option value = " 9" > Choice 9</ option>
< option value = " 10" > Choice 10</ option>
< option value = " 11" > Choice 11</ option>
< option value = " 12" > Choice 12</ option>
</ optgroup>
</ select>
Example 2
Multiple select of size 7 with group counter. Second select is cleared, when first changed:
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Choice 10
Choice 11
Choice 12
Category 1 (1) Category 2 (1) Category 3
Choice 1 Choice 2 Choice 3 Choice 4
copy
$ ( "#kt_multiselectsplitter_example_2" ) . multiselectsplitter ( {
selectSize: 7 ,
clearOnFirstChange: true ,
groupCounter: true
} ) ;
< select id = " kt_multiselectsplitter_example_2" multiple = " multiple" >
< optgroup label = " Category 1" >
< option value = " 1" > Choice 1</ option>
< option value = " 2" > Choice 2</ option>
< option value = " 3" selected = " selected" > Choice 3</ option>
< option value = " 4" > Choice 4</ option>
</ optgroup>
< optgroup label = " Category 2" >
< option value = " 5" > Choice 5</ option>
< option value = " 6" selected = " selected" > Choice 6</ option>
< option value = " 7" > Choice 7</ option>
< option value = " 8" > Choice 8</ option>
</ optgroup>
< optgroup label = " Category 3" >
< option value = " 9" > Choice 9</ option>
< option value = " 10" > Choice 10</ option>
< option value = " 11" > Choice 11</ option>
< option value = " 12" > Choice 12</ option>
</ optgroup>
</ select>
Example 3
Multiple select with group counter. You can select maximum 2 options of all categories:
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Choice 10
Choice 11
Choice 12
Category 1 (1) Category 2 (1) Category 3
Choice 1 Choice 2 Choice 3 Choice 4
copy
$ ( "#kt_multiselectsplitter_example_3" ) . multiselectsplitter ( {
groupCounter: true ,
maximumSelected: 2
} ) ;
< select id = " kt_multiselectsplitter_example_3" multiple = " multiple" >
< optgroup label = " Category 1" >
< option value = " 1" > Choice 1</ option>
< option value = " 2" > Choice 2</ option>
< option value = " 3" selected = " selected" > Choice 3</ option>
< option value = " 4" > Choice 4</ option>
</ optgroup>
< optgroup label = " Category 2" >
< option value = " 5" > Choice 5</ option>
< option value = " 6" selected = " selected" > Choice 6</ option>
< option value = " 7" > Choice 7</ option>
< option value = " 8" > Choice 8</ option>
</ optgroup>
< optgroup label = " Category 3" >
< option value = " 9" > Choice 9</ option>
< option value = " 10" > Choice 10</ option>
< option value = " 11" > Choice 11</ option>
< option value = " 12" > Choice 12</ option>
</ optgroup>
</ select>
Example 4
Multiple select with group counter. You can select maximum 3 options ONLY from one cattegory:
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Choice 10
Choice 11
Choice 12
Category 1 (1) Category 2 Category 3
Choice 1 Choice 2 Choice 3 Choice 4
copy
$ ( "#kt_multiselectsplitter_example_4" ) . multiselectsplitter ( {
groupCounter: true ,
maximumSelected: 3 ,
onlySameGroup: true
} ) ;
< select id = " kt_multiselectsplitter_example_4" multiple = " multiple" >
< optgroup label = " Category 1" >
< option value = " 1" > Choice 1</ option>
< option value = " 2" > Choice 2</ option>
< option value = " 3" selected = " selected" > 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 = " 9" > Choice 9</ option>
< option value = " 10" > Choice 10</ option>
< option value = " 11" > Choice 11</ option>
< option value = " 12" > Choice 12</ option>
</ optgroup>
</ select>
Example 5
Multiple select with custom functions for creating options. Select works even with custom text. On background, original select is correctly updated with original values. Maximum alert message was changed:
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Choice 10
Choice 11
Choice 12
prefix - Category 1 prefix - Category 2 prefix - Category 3
??? ??? ??? ???
copy
$ ( "#kt_multiselectsplitter_example_5" ) . multiselectsplitter ( {
size: 6 ,
groupCounter: true ,
maximumSelected: 2 ,
maximumAlert : function ( maximumSelected ) {
alert ( "You choose " + ( maximumSelected + 1 ) + " options. Are you crazy ?" ) ;
} ,
createFirstSelect : function ( label, $originalSelect ) {
return "<option class=\"text-success\">prefix - " + label + "</option>" ;
} ,
createSecondSelect : function ( label, $firstSelect ) {
return "<option class=\"text-danger\"> ??? </option>" ;
}
} ) ;
< select id = " kt_multiselectsplitter_example_5" multiple = " multiple" >
< 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 = " 9" > Choice 9</ option>
< option value = " 10" > Choice 10</ option>
< option value = " 11" > Choice 11</ option>
< option value = " 12" > Choice 12</ option>
</ optgroup>
</ select>