I have 2 optgroup in my select list and i am trying to show one optgroup and hide other on selection of vehicle.
jQuery(document).ready(function() {
jQuery('select').each(function() {
jQuery(this).select2();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select id="vehicle" name="vehicle">
<option value="car">Car</option>
<option value="bike">Bike</option>
</select>
<select id="car" name="car">
<optgroup label="Bike">
<option value="001">Kawasaki</option>
<option value="002">Suzuki</option>
</optgroup>
<optgroup label="Car">
<option value="c001">Mclaren</option>
<option value="c002">Ferrari</option>
</optgroup>
</select>
All i want is, when i select "car" , it hides optgroup of "bike", and when i select "bike" , it hides optgroup of "car", is it possible ?
Thanks