Establecer la opción seleccionada en jQuery

La publicación de hoy enseñará cómo configurar el valor predeterminado de seleccionar en jQuery.

Establecer la opción seleccionada en jQuery

Este método se usa normalmente para establecer valores de campo de formulario. Establece el valor de cada elemento en el conjunto de elementos coincidentes.

Una cadena de texto, un número o una matriz de cadenas correspondiente al valor de cada elemento coincidente que se designará como seleccionado/comprobado. val() permite a los usuarios pasar una matriz de valores de elementos.

Es útil cuando se trabaja en un objeto jQuery que contiene elementos como <input type="checkbox">, <input type="radio"> y <option> dentro de <select>.

En este caso, las entradas y opciones con un valor que coincida con uno de los elementos de la matriz se marcan o seleccionan, mientras que aquellas cuyo valor no coincide con ninguno de los elementos de la matriz se marcan o desmarcan.

En el caso de <input type="radio"> que forme parte de un grupo de radio y <select>, se deseleccionará cualquier ítem previamente seleccionado. Establecer valores con este método no hace que se active el evento de cambio.

Por este motivo, los controladores de eventos correspondientes no se ejecutan. Tienes que call.trigger("cambiar") después de establecer el valor si quieres ejecutarlos.

El método .val() le permite establecer el valor pasando una función. A partir de jQuery 1.4, se pasan dos argumentos a la función: el índice del elemento actual y su valor actual.

Puede encontrar más información en esta documentación.

Entendámoslo con el siguiente ejemplo.

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

$(function() {
  $('#city').val('goa');
});

En el ejemplo anterior, hemos definido un menú desplegable de ciudad usando seleccionar. El valor predeterminado para el menú desplegable de la ciudad es goa.

Ejecute el fragmento de código anterior en cualquier navegador que admita jQuery; mostrará el siguiente resultado.

Producción: