Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

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

      

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