Cambiar la opción seleccionada de JavaScript

En la publicación de hoy, aprenderemos a cambiar la opción seleccionada del elemento Select en JavaScript.

Cambiar la opción seleccionada en JavaScript

JavaScript proporciona un método incorporado Document querySelector() que devuelve el elemento principal dentro del documento que se ajusta al selector o conjunto de selectores deseado. Se devuelve Null si no se encuentran coincidencias.

Sintaxis:

querySelector(selectors)

Los selectores son una cadena que es un parámetro obligatorio. Esta cadena contiene uno o más selectores que deben coincidir.

Esta cadena debe ser una cadena de selector de CSS válida; si no, se lanza una excepción SyntaxError. Para obtener más información sobre los selectores y cómo administrarlos, consulte .querySelector().

Este método de JavaScript devuelve un objeto Element que representa el primer elemento del documento que coincide con el conjunto especificado de selectores CSS o devuelve null si no hay coincidencias.

Entendámoslo con un ejemplo.

<select id="city">
  <option value="mumbai" selected>Mumbai</option>
  <option value="goa">Goa</option>
  <option value="delhi">Delhi</option>
</select>

const selectedValue = 'goa';
document.querySelector('#city [value="' + selectedValue + '"]').selected = true;

El ejemplo anterior ha definido el menú desplegable select para seleccionar la ubicación preferida. Supongamos que la ubicación preferida por defecto es Mumbai.

A través del método querySelector(), podemos establecer el valor seleccionado en true y seleccionar la ubicación predeterminada para que sea goa. El atributo seleccionado acepta un valor booleano.

Ejecute el fragmento de código anterior en cualquier navegador que admita JavaScript, mostrando el siguiente resultado.

Producción:

Manifestación