如何从 Javascript 中获取 optgroup 值？答案

【问题标题】：How to get optgroup value from Javascript?如何从 Javascript 中获取 optgroup 值？
【发布时间】：2016-04-14 06:42:50
【问题描述】：

<html>
<body>

<select name="lstparameters">
  <optgroup value="100" label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup value="101" label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
 
</body>
</html>

如何从 javascript 中获取 optgroup 值？我想获取 100 和 101 值。

【问题讨论】：

标签： javascript

【解决方案1】：

您可以获取 optgroup 元素并读取 value 属性

var values = Array.from(document.querySelectorAll('select[name="lstparameters"] > optgroup')).map(el => el.getAttribute('value'));

alert(values);

//if you want old browser support
var values = [].slice.call(document.querySelectorAll('select[name="lstparameters"] > optgroup')).map(function(el) {
  return el.getAttribute('value')
});
alert(values);

<select name="lstparameters">
  <optgroup value="100" label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup value="101" label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

【讨论】：

嗨 Arun，它正在获取。如何获得标签“瑞典汽车”的 opt 组值？
@PrinuPhilip el.getAttribute('label')
如何在 javascript 中设置 optgroup 值？。 var newOptGroup = document.createElement('optgroup'); newOptGroup.label = '印度汽车'; newOptGroup.value = '103'; newOptGroup.appendChild（选项）；这里 newOptGroup.value = '103' 不起作用

【解决方案2】：

对于像我这样想要获得selected option 的optgroup label 的人，这样做：

document.querySelector('select[name="lstparameters"] option:checked').parentElement.label

拥有select 和id 可以简化选择器：

document.querySelector('#lstparameters option:checked').parentElement.label

【讨论】：

这是 Javascript 单独的解决方案。 @MarredCheese 感谢您多年后的回答！

【解决方案3】：

您可以使用.closest()函数来确定选中的optgroup

$(function() {
  var selected = $('select option:selected');
  alert(selected.closest('optgroup').attr('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>

  <select name="lstparameters">
    <optgroup value="100" label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab" selected>Saab</option>
    </optgroup>
    <optgroup value="101" label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>

</body>

</html>

【讨论】：

那是 jQuery，OP 没有要求 Jquery 解决方案。添加整个库只是为了读取单个属性是巨大的矫枉过正

【解决方案4】：

@Arun P Johny 已经展示了一些既好又简单的方法。

我只是想提供一些其他的方法。

对于真正的旧浏览器 (

var dropdown = document.getElementsByName('lstparameters')[0];
var optgroups = dropdown.getElementsByTagName('optgroup');

var results = [];
for(var i = 0; i < optgroups.length; i++) {
    results.push(optgroups[i].getAttribute('value'));
}

alert(results);

还有arrow functions 和array prototype map 的另一个选项：

var results = [].map.call(document.querySelectorAll('select optgroup'), x => { return x.getAttribute('value') });

alert(results);

更新：

要通过标签获取值，您可以将标签添加到您的查询选择器 (optgroup[label="Swedish Cars"])，或者对于 for 循环方法，请参见：

var dropdown = document.getElementsByName('lstparameters')[0];
var optgroups = dropdown.getElementsByTagName('optgroup');

for(var i = 0; i < optgroups.length; i++) {
    if (optgroups[i].getAttribute('label') == 'Swedish Cars') {
        alert(optgroups[i].getAttribute('value'));
        return;
    };
}

alert(results);

【讨论】：

如何从标签名称中获取 optgroup 值？
如何在 javascript 中设置 optgroup 值？。 var newOptGroup = document.createElement('optgroup'); newOptGroup.label = '印度汽车'; newOptGroup.value = '103'; newOptGroup.appendChild（选项）；这里 newOptGroup.value = '103' 不起作用
@Prinu Philip 您必须附加它，以便您的下拉列表（选择）。但这与您在本主题中的问题 postet 确实不同。只需打开一个新问题。