Question

我试图在select控件中找到当前所选选项的optgroup标签的值。下面是一些HTML，以显示我想做什么。

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

上面的代码给出了undefined，因为它读取select元素以外的其他元素。任何想法？

Answer 1

您错过了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>的{{1}};你如何处理这种情况取决于你。演示：http://jsfiddle.net/mattball/fyLJm/

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

<optgroup>

Jquery获取选择选项的OPTGROUP标签

1 个答案: