orionrush orionrush - 1 year ago 141
jQuery Question

jQuery get parent optgroup

I'd like to detect if the selection option is under the 'interntaional' optgroup. Right now my appraoch is to detect the closest optgroup from the selected item, and get the contents of its label atribute. I could test that sting for the word 'international'. Other approaches are more then welcome.

As you can tell, from this markup its unfortunate that the optgroup doesn't wrap the child options:

<select id="venue">
<optgroup label="New England"></optgroup>
<option value="1">&nbsp;NH</option>
<option value="2">&nbsp;ME</option>
<option value="3">&nbsp;VT</option>
<option value="4">&nbsp;MA</option>
<option value="4">&nbsp;CT</option>
<option value="4">&nbsp;RI</option>
<optgroup label="International"></optgroup>
<option value="100">Canada</option>
<option value="100">Texas</option>
<option value="100">Mexico</option>
</select>


The jQuery I've been working with obviously wont work, but you can see where Im trying to get to:

dropdownval = jQuery('select#venue option:selected').parentsUntil(jQuery('optgroup'), '[label*="international"]').attr('label');


EDIT

Its been pointed out to me that the following nesting of optgroups is also possible

<select id="venue">
<optgroup label="New England"></optgroup>
<option value="1">&nbsp;NH</option>
<option value="2">&nbsp;ME</option>
<option value="3">&nbsp;VT</option>
<option value="4">&nbsp;MA</option>
<option value="4">&nbsp;CT</option>
<option value="4">&nbsp;RI</option>
<optgroup label="International"></optgroup>
<option value="100">&nbsp;Canada</option>
<option value="100">&nbsp;Texas</option>
<option value="100">&nbsp;Mexico</option>
<optgroup label="&nbsp;Europe"></optgroup>
<option value="100">&nbsp;&nbsp;Bruges</option>
</select>

Answer Source

If your list is dependably ordered (as presented), then you can skip catching the relationship, ie first(), etc, and follow .prevAll('optgroup') all the way up. But if the order of your options might change, try .nextAll('optgroup'), or follow @Barmar's logic to traverse in the direction needed:

$("#venue").change(function() {
    $("#venue option:selected").each(function() {
        if ($(this).prevAll('optgroup').attr('label') == 'International') {
            alert('detected');
        }
    });
});

http://jsbin.com/ibIJezO/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download