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.

JAVASCRIPT
HTML

$("#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:

JAVASCRIPT
HTML

$("#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:

JAVASCRIPT
HTML

$("#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:

JAVASCRIPT
HTML

$("#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:

JAVASCRIPT
HTML

$("#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>