Para cambiar la opción seleccionada en un elemento HTML
Hay múltiples formas de hacerlo y elegir una u otra dependerá de la información que tengas disponible.
Veamos 6 formas diferentes de cambiar la opción seleccionada usando JavaScript:
1. Cambiar la opción de selección por valor
Para cambiar la opción seleccionada mediante programación por el atributo de valor, todo lo que tenemos que hacer es cambiar la propiedad de valor del elemento
El cuadro de selección se actualizará para reflejar el estado de esta propiedad. Esta es la forma más sencilla de actualizar el estado de un cuadro de selección.
Digamos que queremos seleccionar la opción que contiene el atributo value=”steve”.
<select id="my-select">
<option value="ann">Ann Frank</option>
<option value="paul" selected>Paul Allen</option>
<option value="steve">Steve Jobs</option>
</select>
Todo lo que tenemos que hacer es establecer el valor del cuadro de selección en ese mismo valor:
const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
$select.value = 'steve'
};2. Cambiar opción de selección por texto
También podríamos querer cambiar el valor de un cuadro de selección por el texto del elemento
Hacer esto es probablemente la forma más complicada, pero aun así, algo relativamente simple de hacer. Tenemos que iterar sobre las opciones y comparar su texto con el texto del elemento que queremos seleccionar.
Una vez que encontremos el elemento que queremos actualizar, actualizaremos su propiedad seleccionada y la estableceremos en verdadero. De esta forma, el cuadro de selección también se actualizará para reflejar este cambio.
const changeSelected = (e) => {
const text = 'Steve Jobs';
const $select = document.querySelector('#mySelect');
const $options = Array.from($select.options);
const optionToSelect = $options.find(item => item.text ===text);
optionToSelect.selected = true;
};Hay otra forma de hacer esto y eso resolverá el problema con las entradas de selección múltiple. Básicamente, una vez que encontramos el elemento que tiene el texto que estamos buscando, en lugar de simplemente cambiar su propiedad seleccionada, obtendremos su atributo de valor y lo usaremos para establecerlo como el único valor para todo el cuadro de selección.
const changeSelected = (e) => {
const text = 'Steve Jobs';
const $select = document.querySelector('#mySelect');
const $options = Array.from($select.options);
const optionToSelect = $options.find(item => item.text ===text);
$select.value = optionToSelect.value;
};
3. Cambiar la opción de selección por ID de opción, CLASE o atributo
Esto también es bastante simple. Esta solución también funcionará para entradas de selección múltiple asignándoles un valor único:
const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
const $option = $select.querySelector('#myId');
$select.value = $option.value;
};Y por supuesto, se puede hacer de la misma forma si tenemos un atributo de clase en lugar de un id o cualquier otro atributo como data-selected=”true”. Simplemente cambie la consulta para obtener el elemento de opción:
const $option = $select.querySelector('#myId');
const $option = $select.querySelector('#mySelect .myId');
const $option = $select.querySelector('#mySelect [data-selected="myElement"]');
4. Cambiar la opción seleccionada por su índice
Si todo lo que tenemos es el índice del elemento de opción, podemos establecer el atributo seleccionado recuperando las opciones del cuadro de selección. Luego solo tenemos que seleccionar el que necesitamos de la matriz por su índice.
Observe que el índice está basado en 0. Entonces, el primer elemento
Sabiendo esto, si queremos seleccionar el tercer elemento, usaremos el índice 2 en nuestro código para seleccionarlo:
document.querySelector('#mySelect').querySelector('option')[2].selected = 'selected'
Veamos cómo funciona en un evento de clic:
Y reescrito para trabajar para entradas de selección múltiple:
const $select = document.querySelector('#mySelect');
$select.value = $select.querySelector('option')[2].value;
Conclusión
Recuerde que, independientemente de la forma que elija utilizar para reemplace y cambie el elemento seleccionado en sus elementos , será mejor que actualice la propiedad de valor si desea que se seleccione un solo elemento. De lo contrario, cuando tenga cuadros de selección que admitan múltiples elementos, no reemplazará el elemento activo, sino que simplemente agregará otro.
¡Ahora sabe cómo establecer el valor de un elemento
Si estás aprendiendo JavaScript y esto te parece un poco difícil, ¡no hay de qué preocuparse! Eventualmente, llegarás allí. ¡Vea cuánto tiempo lleva aprender JavaScript y cuál es la mejor manera de aprender JavaScript!
Artículos relacionados
