jQuery：在 <select> 元素中查找所选值的 <optgroup>答案

【问题标题】：jQuery: find the <optgroup> for a selected value in a <select> elementjQuery：在 <select> 元素中查找所选值的 <optgroup>
【发布时间】：2012-10-14 00:10:01
【问题描述】：

我有一个包含不同选项组的下拉菜单。如果有人选择了一个选项，我如何检查它属于哪个 optgroup？例如，如果选择了“ferrari”，您将如何确定它属于哪个 optgroup？

随意使用 jQuery 或原始 javascript。

<select name="testSelect">
   <optgroup label="fruits">
      <option value="apples">Apples</option>
      <option value="oranges">Oranges</option>
      <option value="pears">Pears</option>
   </optgroup>
   <optgroup label="cars">
      <option value="ford">ford</option>
      <option value="toyota">toyota</option>
      <option value="ferrari">ferrari</option>
   </optgroup>
</select>

【问题讨论】：

等等。这可能就像找到所选元素的父级一样微不足道。

标签： javascript jquery html option

【解决方案1】：

您可以使用 jQuery 做到这一点：

$('select').change(function() {
    var selected = $(':selected', this);
    alert(selected.closest('optgroup').attr('label'));
});

在此处查看实时示例：http://jsfiddle.net/jkeyes/zjLCp/1/

更新：是的，你可以使用 parent http://jsfiddle.net/jkeyes/zjLCp/2/

selected.parent()

【讨论】：

奇怪的是 .click 事件在 jquery 中对于这个元素不可用..!!

【解决方案2】：

好吧，在纯js中：

this.options[this.selectedIndex].parentNode.label

没有一个函数调用和更少的启动代码。 :-)

【讨论】：

this.selectedOptions[0].parentNode.label
@lokeshjain2008—我认为 OP 想要一种可靠的方法，而不是 partially supported in a couple of browsers。
没问题。 WHATWG spec 中的东西往往有点“外面”，W3C HTML5 spec 更接近实际可用的东西，但在某些地方仍然有点前沿。
在给定 onClick 处理程序事件的情况下，这可以在反应中完成吗？