Bootstrap
React
Tailwind
Angular
VueBootstrap Multi Select Splitter.
Transforms a <select> containing one or more <optgroup> in two chained <select>. Click here
Example 1
Simple select, no multiple
<select id="example1">
<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>
Example 2
Multiple select of size 7 with group counter. Second select is cleared, when first changed.
<select id="example2" multiple="multiple">
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2" selected="selected">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>
Example 3
Multiple select with group counter. You can select maximum 2 options of all categories.
<select id="example3" 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.
<select id="example4" 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.
<select id="example5" 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>