jQuery：查找<select>元素中选定值的<optgroup>

Question

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

随意使用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>

- Don P

---

等一下。这可能只是查找所选元素的父级元素这么简单。 - Don P

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

alert(selected.parent().attr('label'));

- John Keyes

---

很奇怪，这个元素中没有可用的.click事件在jQuery中..!! - Tamaghna Banerjee

Answer 2

好的，用纯JS:

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

没有任何函数调用，而且代码更简洁。 :-)

- RobG

---

this.selectedOptions[0].parentNode.label - lokeshjain2008

@lokeshjain2008——我认为OP想要一个可靠的方法，而不是一些在几个浏览器中部分支持的东西。 - RobG

没问题。WHATWG规范中的内容有点“离谱”，而W3C HTML5规范则更接近实际可用的情况，但在某些地方仍然有一些前沿技术。 - RobG

在React中，是否可以使用onClick处理程序事件来完成这个任务？ - fungusanthrax