jQuery获取select选项中OPTGROUP的标签名称

Question

我试图找到选择控件中当前选定选项的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。有什么想法吗？

- Sir Lojik

Answer 1

你漏掉了在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);
});

对于不在<optgroup>中的<option>，这仍将记录undefined；如何处理这种情况取决于您。演示： http://jsfiddle.net/mattball/fyLJm/

---

我想知道是否可以编写一个函数，该函数接受任何选择元素ID并返回所选项目的opt组标签。$()内部的“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);
});​

- Matt Ball

---

移除了</a>标签后，当我运行代码时出现了以下错误：Uncaught TypeError: Object #<Object> has no method 'prop'。 - Sir Lojik

你是否正在使用 jQuery <1.6？如果是的话，请改用.attr()。http://api.jquery.com/prop - Matt Ball

我在想，你能否编写一个函数，该函数接受任何选择元素的ID，并返回所选项目的optgroup标签。$()中的“this”让我感到困惑。我需要一个可以在onchange事件之外使用的函数。 - Sir Lojik

由于某种原因，jsfiddle正在花费很长时间（服务器繁忙），您能否编辑您的答案并将其粘贴在那里？谢谢。 - Sir Lojik