Filtered Multiple Select
This is an example of a filtered multiple select combo box
by Shawn Wood
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script>
<!--<form id="selectTest">
<div id="filteredSelect" class="row form-group required">
<div class="col-xs-3">
<label class="control-label" for="make">Make</label>
<select name="make" id="make" class="form-control" size="13" multiple="multiple">
<option value="1">Chevrolet</option>
<option value="2">Ford</option>
<option value="3">Honda</option>
<option value="4">Hyundai</option>
</select>
</div>
<div class="col-xs-4">
<label class="control-label" for="model">Model</label>
<select name="from[]" id="model" class="form-control" size="13" multiple="multiple">
<optgroup label="Chevrolet">
<option value="1">Camaro</option>
<option value="2">Impala</option>
<option value="3">Sonic</option>
</optgroup>
<optgroup label="Ford">
<option value="4">Focus</option>
<option value="5">Mustang</option>
</optgroup>
<optgroup label="Honda">
<option value="6">Accord</option>
<option value="7">Civic</option>
<option value="8">CRX</option>
<option value="9">Fit</option>
<option value="10">Insight</option>
</optgroup>
<optgroup label="Hyundai">
<option value="11">Accent</option>
...
CSS
#model optgroup {}
#model optgroup option {}
JavaScript
//$(document).ready(function() {
// $('#multiselect').multiselect();
//});