Logo
Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

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

						

User Profile 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo