Me pregunto cuál es la forma más fácil de seleccionar todas las opciones dentro de un solo grupo de opciones.
Tengo entendido que las etiquetas de optgroup en sí mismas no se pueden seleccionar, por lo que mi implementación actual tiene un elemento de opción inmediatamente después de cada etiqueta de optgroup que dice algo así como "Todas las opciones en este optgroup". Puedo detectar el evento cuando se selecciona esta opción "Todos", pero estoy perdido después de ese punto. ¿Es este el camino correcto para bajar, o estoy haciendo esto más difícil de lo necesario?
Utilice el selector de atributos:
'[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>