JQuery: найдите <optgroup> для выбранного значения в элементе <select>

У меня есть выпадающее меню с различными группами опций. Если кто-то выбирает вариант, как я могу проверить, к какой группе optgroup принадлежит? Например, если выбрано "ferrari", как бы вы определили, к какой группе optgroup принадлежит?

Не стесняйтесь использовать jQuery или 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

Вы можете сделать это с помощью jQuery:

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

Смотрите живой пример здесь: http://jsfiddle.net/jkeyes/zjLCp/1/

Обновление: Да, вы могли бы использовать parent http://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent()

Ответ 2

Ну, в чистом js:

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

Не один вызов функции и меньше кода для загрузки.: -)