2012-04-10 274 views
19

我試圖在選擇控件中找到當前選定選項的optgroup標籤的值。下面是一些HTML來顯示我試圖做什麼。jquery獲取選項OPTGROUP的標籤

<select id='sector_select' name='sector_select' data-placeholder="Select Sector..." style="width:200px;" class="chzn-select">  
    <option value='' selected='selected'>All Sectors</a> 
    <optgroup label="Consultancy Services"> 
     <option value='Employment placement/ recruitment'>Employment placement/ recruitment</option> 
    </optgroup> 
    <optgroup label="Supplies"> 
     <option value='Food, beverages and related products'>Food, beverages and related products</option> 
    </optgroup>     
</select> 
<script type="text/javascript"> 
$('#sector_select').change(function() 
{ 
    var label=$('sector_select :selected').parent().attr('label'); 
    console.log(label); 
});  
</script> 

上面的代碼給出了未定義,因爲它的選擇元素的讀取父項除了選項以外。有任何想法嗎?

回答

39

您錯過了ID selector中的#

$('#sector_select').change(function() 
{ 
    //   ↓ 
    var label=$('#sector_select :selected').parent().attr('label'); 
    console.log(label); 
}); 

你還要虛假</a>標籤在

<option value='' selected='selected'>All Sectors</a> 

樣式可以使用一些改進,在那之後:

$('#sector_select').on('change', function() 
{ 
    var label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label'); 
    console.log(label); 
}); 

這仍然會記錄undefined<option>這不在<optgroup>;你如何處理這種情況取決於你。演示:http://jsfiddle.net/mattball/fyLJm/


just wondering if you can write up a function that takes whatever select element id and returns optgroup label of selected item. the 'this' confuses me within the $(). a function i can use outside the onchange event

function logOptgroupLabel(id) 
{ 
    var elt = $('#'+id)[0]; 
    var label = $(elt.options[elt.selectedIndex]).closest('optgroup').prop('label'); 
    console.log(label); 
} 

$('#sector_select').on('change', function() { 
    logOptgroupLabel(this.id); 
});​ 
+0

刪除,我得到這個,當我跑的代碼,遺漏的類型錯誤:對象#有沒有方法 '託' – 2012-04-10 17:05:03

+1

你使用jQuery <1.6? http://api.jquery.com/prop如果是這樣,請改用'.attr()'。 – 2012-04-10 17:06:08

+0

只是想知道如果你可以寫一個函數,它採用任何選擇元素ID並返回所選項目的optgroup標籤。 'this'把我混淆在$()中。一個函數,我可以使用onchange事件外 – 2012-04-10 17:40:11