jQuery:在<select>元素</select> </optgroup>中找到所选值的<optgroup>

时间:2012-10-23 23:44:10

标签: javascript jquery html option

我有一个包含不同选项组的下拉菜单。如果有人选择了一个选项,我该如何查看它属于哪个optgroup?例如,如果选择“法拉利”,您将如何确定它属于哪个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>

2 个答案:

答案 0 :(得分:29)

您可以使用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()

答案 1 :(得分:12)

嗯,纯粹的js:

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

没有单个函数调用,也没有更少的代码可以启动。 : - )