Tengo un menú desplegable, con un botón para seleccionar todos los valores. La matriz ya tiene algunos valores predeterminados y, con solo hacer clic en un botón, todos los demás valores deben presionarse (seleccionarse).
He probado otras soluciones de SO, pero parece que no puedo hacer que funcione.
Los valores que necesito enviar a otra matriz:
valuesToPush: { value1: 'Value 1', value2: 'value 2', value3: 'Value 3', value4: 'Value 4', value5: 'Value 5', },La matriz a la que estoy presionando está vacía inicialmente, por lo que:
pushedValues: [];En el montaje de la página, inserto algunos valores predeterminados en la matriz:
pushedValues.push('value1','value2');¿Cómo puedo agregar el resto de los valores por clave (necesito la clave para la solicitud y el valor es para mostrar en la página) cuando hago clic en el botón? Podría hacerlo de la misma manera, pero se podrían agregar más pares clave-valor, por lo que necesito que sea dinámico.
Prueba esto
const pushedValues = []; function myFunction() { var x = document.getElementById("val").value; console.log("You selected: " + x); if(!pushedValues.includes(x)){ pushedValues.push(x); console.log(pushedValues); } } <label for="cars">Choose a value:</label> <select name="val" id="val" onchange="myFunction()"> <option value="value1">value 1</option> <option value="value2">value 2</option> <option value="value3">value 3</option> <option value="value4">value 4</option> <option value="value5">value 5</option> </select>No estoy seguro si puede, pero puede convertir sus valores en una matriz de objetos e intentar algo como el siguiente código (necesita agregar más trabajo para trabajar en la 'deselección' de elementos, pero creo que esto podría acercarlo más a lo que está intentando para lograr (creo)
// update values to array of objects const valuesToPush = [{ value1: 'Value 1' }, { value2: 'value 2' }, { value3: 'Value 3' }, { value4: 'Value 4' }, { value5: 'Value 5' }, ]; const pushedValues = []; // push some defaults (keys only) pushedValues.push('value1', 'value4'); console.log(pushedValues); function init() { var selectObj = document.getElementById("select"); valuesToPush.forEach(obj => { for (const [key, value] of Object.entries(obj)) { var newOption = new Option(value, key); // mark default as selected if (pushedValues.includes(key)) { newOption.selected = true; } // add them as options for the select selectObj.add(newOption); } }); } function myFunction() { var x = document.getElementById("select").value; console.log("You selected: " + x); console.log(pushedValues); if (!pushedValues.includes(x)) { pushedValues.push(x); console.log(pushedValues); } } init(); <label for="cars">Choose a value:</label> <br/> <select name="val" id="select" multiple onchange="myFunction()"></select>