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
It might be better (and slightly more user friendly) if you just disable the options instead of removing them. This is also natively supported by Select2, so the user will not be able to select an option that is disabled.
jQuery(document).ready(function() {
jQuery('select').each(function() {
jQuery(this).select2();
});
jQuery('#vehicle').on('change', function() {
if ($(this).val() == 'car') {
$('#car-bike option').prop('disabled', true);
$('#car-car option').prop('disabled', false);
} else {
$('#car-bike option').prop('disabled', false);
$('#car-car option').prop('disabled', true);
}
// Tell Select2 to update the current selection
// Some browsers (correctly) switch the selected option if it is disabled
// Others don't, which is unfortunate
$('#car').trigger('change');
});
});
<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 id="car-bike" label="Bike">
<option value="001">Kawasaki</option>
<option value="002">Suzuki</option>
</optgroup>
<optgroup id="car-car" label="Car">
<option value="c001">Mclaren</option>
<option value="c002">Ferrari</option>
</optgroup>
</select>