Supongamos que tengo este menú desplegable con selección múltiple:
<select id='grp_option'> <optgroup label="Group 1"> <option value='Option 1.1'>Option 1.1</option> </optgroup> <optgroup label="Group 2"> <option value='Option 2.1'>Option 2.1</option> <option value='Option 2.2'>Option 2.2</option> </optgroup> </select>Me gustaría crear una matriz de objetos como este:
let array = []; let obj, obj2; obj[label] = value; obj2[label2] = value2; array.push(obj); array.push(obj2);Donde etiqueta es la etiqueta del grupo de opciones de cada opción seleccionada y valor es el valor de cada opción seleccionada.
¿Tienes alguna idea? Gracias
Para hacer lo que necesita, puede usar el método map() . Tenga en cuenta que puede proporcionar una variable entre paréntesis como nombre de la propiedad.
También tenga en cuenta que agregué el atributo multiple a la select para permitir que se seleccione más de una sola option : crear una matriz de valores no tiene sentido sin esto.
let $select = $('#grp_option').on('change', () => { let arr = $select.find(':selected').map((i, el) => ({ [$(el).closest('optgroup').prop('label')]: $(el).text() })).get(); console.log(arr); }); select { width: 150px; height: 175px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select id="grp_option" multiple> <optgroup label="Group 1"> <option value="Option 1.1">Option 1.1</option> </optgroup> <optgroup label="Group 2"> <option value="Option 2.1">Option 2.1</option> <option value="Option 2.2">Option 2.2</option> </optgroup> <optgroup label="Group 3"> <option value="Option 3.1">Option 3.1</option> <option value="Option 3.2">Option 3.2</option> <option value="Option 3.2">Option 3.3</option> </optgroup> </select>