2010-12-08 78 views
11

我正在使用帶選項分組在一起的多選。如何在jQuery中獲得多選的optgroup?

<select title="Fruits" multiple="multiple" id="fruits" name="fruits[]"> 
    <option selected="selected" label="All" value="">All</option> 
    <optgroup label="" class="fruit"> 
     <option label="apple" value="1">Apple</option> 
     <option label="pear" value="2">Pear</option> 
     <option label="orange" value="3">Orange</option> 
    </optgroup> 
    <optgroup label="" class="berries"> 
     <option label="strawberry" value="4">Strawberry</option> 
     <option label="raspberry" value="5">Raspberry</option> 
     <option label="blueberry" value="6">Blueberry</option> 
    </optgroup> 
</select> 

我已經試過$(this).find("option:selected").parent().attr("label")只返回第一個選擇的選項的OPTGROUP,這意味着如果雙方都選擇了草莓和梨,OPTGROUP「.fruit」將在兩個帳戶被退回。

使用jQuery,我如何獲得每個選定選項的optgroup?

回答

16

試試這個

$(this).find("option:selected").each(function(){ 
    $(this).parent().attr("label"); 
}); 
3

.each()

$(this).find("option:selected").each(function(){ 
    alert($(this).parent().attr("label")); 
}); 
4

嘗試這可能是有點晚了,但我剛剛工作在這個問題上,這似乎是最優雅的解決方案,我發現:

$("#fruits option").filter(":selected").parent("optgroup").attr("label"); 

這是一個小提琴修改爲這個特殊的例子(使用類屬性,而不是標籤屬性):http://jsfiddle.net/pNjsj/

希望幫助別人:)

+0

如果你抓住一個事件和做$(e.target).filter(「:選擇」),由於某種原因,將無法工作。在這種情況下,$(e.target).find(「:selected」)起作用。實際上,find()在兩種情況下都起作用,所以我推薦你使用它來代替filter()。 – Swader 2012-09-21 09:02:35