jQuery get parent optgroup

Question

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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/

jQuery get parent optgroup

Sign up