Me gustaría devolver los valores de opción seleccionados en un cuadro de selección de opciones múltiples Funciona, no tengo etiquetas de grupo de opciones. Tan pronto como agrego estas etiquetas, no puedo obtener los valores secundarios. Estoy seguro de que esta es una pregunta tonta, pero no puedo encontrar la sintaxis correcta para obtener la matriz correcta, que es dropdown.options
$('#mydropdown option').click(function(evt) { var selectedOption = evt.target; var dropdown = this.parentNode; queue.add(selectedOption.value); Array.from(dropdown.options).forEach(function(option) { if (!option.selected) { queue.remove(option.value); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select id="mydropdown" multiple="multiple"> <optgroup label="Group 1"> <option value="optionx Fruits" selected>Fruits</option> <option value="optionx Vegetables">Vegetables</option> </optgroup> <optgroup label="Group 2"> <option value="optionx Nuts">Nuts</option> <option value="optionx Meats">Meats</option> </optgroup> </select>Podemos simplemente crear un nuevo conjunto cada vez
Esto es importante si desea que el conjunto contenga solo los seleccionados.
Si desea que el conjunto contenga lo que el usuario seleccionó y MANTENERLO cuando el usuario deseleccione, simplemente agregue
También observe que activé el cambio para inicializar el conjunto al cargar
let queue; $('#mydropdown').on("change", function(evt) { queue = new Set(); $("option:selected",this).each(function() { queue.add(this.value) }); console.log("changed -------") for (const item of queue) console.log(item) }).change(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select id="mydropdown" multiple="multiple"> <optgroup label="Group 1"> <option value="optionx Fruits" selected>Fruits</option> <option value="optionx Vegetables">Vegetables</option> </optgroup> <optgroup label="Group 2"> <option value="optionx Nuts">Nuts</option> <option value="optionx Meats">Meats</option> </optgroup> </select>SI desea mantener el orden seleccionado, solo tendrá que agregar y luego eliminar
let queue = new Set(); $('#mydropdown').on("click", function(evt) { $(this).find("option").each(function() { queue.add(this.value); if (!this.selected) queue.delete(this.value) }) console.log("changed -------") for (const item of queue) console.log(item) }).click(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select id="mydropdown" multiple="multiple"> <optgroup label="Group 1"> <option value="optionx Fruits" selected>Fruits</option> <option value="optionx Vegetables">Vegetables</option> </optgroup> <optgroup label="Group 2"> <option value="optionx Nuts">Nuts</option> <option value="optionx Meats">Meats</option> </optgroup> </select>Al hacer clic, su nodo principal se convierte en grupo de opciones
var dropdown = this.parentNode;por lo que debe configurar
var dropdown = this.parentNode.parentNode;