jQuery: tìm số <optgroup> cho giá trị được chọn trong một yếu tố <select>

Question

Tôi có trình đơn thả xuống với các nhóm tùy chọn khác nhau. Nếu ai đó chọn một tùy chọn, làm thế nào tôi có thể kiểm tra xem nó thuộc về nhóm nào? Ví dụ: nếu 'ferrari' được chọn, bạn sẽ xác định nhóm thuộc nhóm nào?

Hãy sử dụng jQuery hoặc javascript thô.

<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

Bạn có thể làm điều này bằng jQuery:

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

Xem một ví dụ sống ở đây: http://jsfiddle.net/jkeyes/zjLCp/1/

Cập nhật: Có bạn có thể sử dụng parenthttp://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent() 

Answer 2

Vâng , trong js tinh khiết:

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

Không phải một cuộc gọi hàm đơn và ít mã khởi động hơn. :-)