如何选择 optgroup 中的所有选项？

Question

我想知道在单个 optgroup 中选择所有选项的最简单方法是什么？

我的理解是 optgroup 标签本身无法选择，因此我当前的实现在每个 optgroup 标签后立即有一个选项元素，上面写着“此 optgroup 中的所有选项”之类的内容。当选择“全部”选项时，我能够检测到该事件，但在那之后我就迷失了。这是正确的低头之路，还是我让事情变得比需要的更困难？

Answer 1

使用属性选择器：

'[attribute name = "value"]'

const groupA = document.querySelector('[label="A"]');

/* 
Using .querySelectorAll() to collect all of optgroup A options into a NodeList
*/
const groupA = document.querySelector('[label="A"]');

const allOptA = groupA.querySelectorAll('option');

allOptA.forEach(opt => opt.style.color = 'tomato')

/*
Using .children and spead operator [...x] to get all options from optgroup B 
into an Array
*/
const groupB = document.querySelector('[label="B"]');

const allOptB = groupB.children;

[...allOptB].forEach(opt => opt.style.color = 'lime');

// Gather all optgroups into an Array
const allGroups = [...document.querySelectorAll('optgroup')];

// Gather each optgroups' options into a sub-array
const allOpts = allGroups.flatMap(grp => [grp.querySelectorAll('option')]);

// Get the value of the first optgroup  third option
console.log(allOpts[0][2].value);

<select>
  <optgroup label='A'>
    <option value='0'>0</option>
    <option value='2'>2</option>
    <option value='4'>4</option>
  </optgroup>
  <optgroup label='B'>
    <option value='1'>1</option>
    <option value='3'>3</option>
    <option value='5'>5</option>
  </optgroup>
</select>