Reputation: 23
<select name="campus">
<optgroup label="Northwest">
<option value="1">Gary</option>
<option value="2">Valparaiso</option>
<option value="3">East Chicago</option>
</optgroup>
<optgroup label="North Central">
<option value="4">South Bend</option>
<option value="5">Elkhart</option>
<option value="6">Warsaw</option>
</optgroup>
</select>
I have multiple <optgroup>
s in my dropdown. I am using the multiselect plugin. How can I restrict to select only one optgroup selection? That is, when one option in a group is selected, options in other groups should be disabled.
Upvotes: 0
Views: 1040
Reputation: 3740
Please provide the element
that will be your event handler. We cannot code further without that.
That is, what is determining if certain items are blocked or not?
HTML:
<select name="campus" id="selCampus">
<optgroup label="Northwest" id="northWest">
<option value="1">Gary</option>
<option value="2">Valparaiso</option>
<option value="3">East Chicago</option>
</optgroup>
<optgroup label="North Central" id="northCentral">
<option value="4">South Bend</option>
<option value="5">Elkhart</option>
<option value="6">Warsaw</option>
</optgroup>
</select>
JS:
$('#selCampus').on('click', function(){
$('#northCentral').hide();
});
Upvotes: 0
Reputation: 3134
It sounds like you want something like this. Based on what you're asking for, how would you go about selecting from a different option group, if all the options are disabled?
$('select').on('change', function () {
var selectedGroup = $('option:selected', this).parent();
$('optgroup', this).not(selectedGroup).prop('disabled', true);
});
Here is a Fiddle
Upvotes: 1