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();
      });

      

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo