jQuery: find the <optgroup> for a selected value in a <select> element

问题

I have a dropdown menu with different option groups. If someone selects an option, how can I check which optgroup it belongs to? For example if 'ferrari' were selected, how would you determine which optgroup it belongs to?

Feel free to use jQuery or raw javascript.

<select name="testSelect">
   <optgroup label="fruits">
      <option value="apples">Apples</option>
      <option value="oranges">Oranges</option>
      <option value="pears">Pears</option>
   </optgroup>
   <optgroup label="cars">
      <option value="ford">ford</option>
      <option value="toyota">toyota</option>
      <option value="ferrari">ferrari</option>
   </optgroup>
</select>

回答1:

You can do this using jQuery:

$('select').change(function() {
    var selected = $(':selected', this);
    alert(selected.closest('optgroup').attr('label'));
});​

See a live example here: http://jsfiddle.net/jkeyes/zjLCp/1/

Update: Yes you could use parent http://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent()

回答2:

Well, in pure js:

this.options[this.selectedIndex].parentNode.label

Not a single function call and less code to boot. :-)

来源：https://stackoverflow.com/questions/13040979/jquery-find-the-optgroup-for-a-selected-value-in-a-select-element