Logo

Bootstrap Multiple Select Splitter Examples


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Bootstrap Multiple Select Splitter Examples
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Standard Group Select</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <select class="form-control">
             <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="5">Choice 9</option>
              <option value="6">Choice 10</option>
              <option value="7">Choice 11</option>
              <option value="8">Choice 12</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Select Splitter 1</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <select class="form-control" id="kt_multipleselectsplitter_1">
             <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" selected>Choice 6</option>
              <option value="7">Choice 7</option>
              <option value="8">Choice 8</option>
             </optgroup>
             <optgroup label="Category 3">
              <option value="5">Choice 9</option>
              <option value="6">Choice 10</option>
              <option value="7">Choice 11</option>
              <option value="8">Choice 12</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Select Splitter 2</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <select class="form-control" id="kt_multipleselectsplitter_2">
             <optgroup label="Group 1">
              <option value="1" selected>Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
              <option value="4">Option 4</option>
             </optgroup>
             <optgroup label="Group 2">
              <option value="5">Option 5</option>
              <option value="6">Option 6</option>
              <option value="7">Option 7</option>
              <option value="8">Option 8</option>
             </optgroup>
             <optgroup label="Group 3">
              <option value="5">Option 9</option>
              <option value="6">Option 10</option>
              <option value="7">Option 11</option>
              <option value="8">Option 12</option>
             </optgroup>
             <optgroup label="Group 4">
              <option value="5">Option 13</option>
              <option value="6">Option 14</option>
              <option value="7">Option 15</option>
              <option value="8">Option 16</option>
             </optgroup>
             <optgroup label="Group 5">
              <option value="5">Option 17</option>
              <option value="6">Option 18</option>
              <option value="7">Option 19</option>
              <option value="8">Option 20</option>
             </optgroup>
            </select>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>
      

      // Class definition

      var KTBootstrapMultipleSelectsplitter = function () {

       // Private functions
       var demos = function () {
        // minimum setup
        $('#kt_multipleselectsplitter_1, #kt_multipleselectsplitter_2').multiselectsplitter();
       }

       return {
        // public functions
        init: function() {
         demos();
        }
       };
      }();

      jQuery(document).ready(function() {
       KTBootstrapMultipleSelectsplitter.init();
      });

      

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30