jQuery: znaleźć <optgroup> dla wybranej wartości w <select> elementu

Question

mam menu z różnymi grupami opcji. Jeśli ktoś wybierze opcję, w jaki sposób mogę sprawdzić, do której grupy optycznej należy? Na przykład, jeśli wybrano "ferrari", jak byś określił, do której grupy optycznej należy?

Zapraszamy do korzystania z jQuery lub surowego 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> 

Answer 1

Można to zrobić przy użyciu jQuery:

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

Zobacz na żywo przykład tutaj: http://jsfiddle.net/jkeyes/zjLCp/1/

Aktualizacja: Tak można użyć parenthttp://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent() 

Answer 2

Dobrze w czystym js:

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

Brak pojedynczego wywołania funkcji i mniej kodu do rozruchu. :-)