Jquery获取选项OPTGROUP的标签 [英] Jquery get label of OPTGROUP of select option

问题描述

我试图在选择控件中找到当前所选选项的optgroup标签的值。

 < select id ='sector_select'name ='sector_select'data -placeholder =选择扇区...style =width：200px;类= chzn选 > 
< option value =''selected ='selected'>所有部门< / a> 
< optgroup label =顾问服务> 
< option value ='就业安置/招聘>就业安置/招聘< / option> 
< / optgroup> 
< optgroup label =Supplies> 
< option value ='食品，饮料及相关产品>食品，饮料及相关产品< / option> 
< / optgroup> 
< / select> 
< script type =text / javascript> 
 $（'＃sector_select'）。change（function（）
 {
 var label = $（'sector_select：selected'）。parent（）。attr（'label'）; 
 console.log（label）; 
}）; 
< / script> 
  

上面的代码给出了未定义，因为它的选择元素的读取父元素不是选项。任何想法？

解决方案您错过了＃ a href =http://api.jquery.com/id-selector/ =noreferrer> ID选择器。

  $（'＃sector_select'）。change（function（）
 {
 //↓
 var label = $（'＃sector_select：selected'）。parent ）.attr（'label'）; 
 console.log（label）; 
}）; 
  

您还有一个伪造的< / a> b
$ b $ p $ < option value =''selected ='selected'>所有扇区< / a>


风格可以使用一些改进，然后：

（pre> $（'＃sector_select'）。on（'change'，function（）
{
var label = $（this.options [this。 （'optgroup'）。prop（'label'）;
console.log（label）;
}）;


这仍然会记录 undefined code>< option> 不在< optgroup> 中;你如何处理这种情况取决于你。演示： http://jsfiddle.net/mattball/fyLJm/

---

只是想知道是否可以编写一个函数，它接受任何select元素id并返回所选项目的optgroup标签。 'this'把我混淆在$（）中。我可以在onchange事件之外使用的函数

 函数logOptgroupLabel（id）
 {
 var elt = $（'＃'+ id）[0]; 
 var label = $（elt.options [elt.selectedIndex]）。closest（'optgroup'）。prop（'label'）; 
 console.log（label）; （'change'，function（）{
 logOptgroupLabel（this.id）; 
}）; 
 
 
 $（'＃sector_select'）。 
  

I am trying to find the value of the optgroup label of currently selected option in a select control. below is some html to show what im trying to do.

<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>

the above code gives undefined because its reading parent of select element other than option. any ideas?

解决方案

You're missing the # in the ID selector.

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

You've also got a spurious </a> tag in

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

The style could use some improvement, after that:

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

This will still log undefined for the <option> which is not in an <optgroup>; how you handle that scenario is up to you. Demo: 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);
});​

这篇关于Jquery获取选项OPTGROUP的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！