jQuery：在<select>元素中找到<optgroup>的選定值

我有一個帶有不同選項組的下拉菜單。如果有人選擇了一個選項，我如何檢查它屬於哪個optgroup？例如，如果選擇了「ferrari」，您將如何確定它屬於哪個optgroup？jQuery：在<select>元素中找到<optgroup>的選定值

隨意使用jQuery或原始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>

來源

2012-10-23 Don P

等一下。這可能與查找所選元素的父級一樣無關緊要。 –

爲此，您可以使用jQuery：

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

在這裏看到一個活生生的例子：http://jsfiddle.net/jkeyes/zjLCp/1/

更新：是的，你可以使用parenthttp://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent()

來源

2012-10-23 23:48:29

奇怪的是，.click事件不適用於此元素的jquery .. !! –

好，純js：

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

沒有一個函數調用和更少的代碼來引導。 :-)

來源

2012-10-24 02:38:24 RobG

this.selectedOptions [0] .parentNode.label – lokeshjain2008

@ lokeshjain2008-我假設OP想要一個可靠的方法，而不是[在幾個瀏覽器中部分支持]（http://stackoverflow.com/questions/10711767/is- selectedoptions-破碎或）。 – RobG

感謝您的鏈接。 – lokeshjain2008

jQuery：在<select>元素中找到<optgroup>的選定值

回答

相關問題