jQuery: trovare <optgroup> per un valore selezionato in un elemento <select>

Question

Ho un menu a discesa con diversi gruppi di opzioni. Se qualcuno seleziona un'opzione, come posso verificare a quale gruppo optop appartiene? Ad esempio, se sono stati selezionati "ferrari", in che modo stabiliresti a quale optgroup appartiene?

Sentiti libero di usare jQuery o javascript non elaborato.

<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

È possibile farlo utilizzando jQuery:

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

Consulta l'esempio vivo qui: http://jsfiddle.net/jkeyes/zjLCp/1/

Aggiornamento: Sì, si potrebbe utilizzare parenthttp://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent() 

Answer 2

Bene , in js puro:

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

Non una singola chiamata di funzione e meno codice da avviare. :-)