Bootstrap Selectsplitter's   transforms a
										
<select>containing one or more
										
<optgroup>in two chained
										
<select>. For full documentation please check the
										
plugin's repository .
 
										
									 
									
									
									
										
										
										 
										
										
										
										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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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 
													 
												 
											
										 
										
										
										
											
											
												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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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 
													 
												 
											
										 
										
										
										
											
											
												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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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 
													 
												 
											
										 
										
										
										
											
											
												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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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 
													 
												 
											
										 
										
										
										
											
											
												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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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 
													 
												 
											
										 
										
										
										
											
											
												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>