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:
<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.
$("#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:
$("#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:
$("#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:
$("#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:
$("#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>
2022©
Keenthemes
