27

我正在尝试在选择控件中查找当前所选选项的 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 元素而不是 option 的父级。有任何想法吗？

4

1 回答 1

59

您缺少ID 选择器#中的。

$('#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);
});

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

只是想知道您是否可以编写一个函数，该函数采用任何选择元素 id 并返回所选项目的 optgroup 标签。'this' 在 $() 中让我感到困惑。我可以在 onchange 事件之外使用的功能

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);
});​
于 2012-04-10T16:57:14.483 回答