Cambiar el valor seleccionado en un combobox o select con javascript y jquery

Estrada Web Group
Administrador
Cambiar el valor seleccionado en un combobox o select con javascript y jquery

select set value javascript or jquery

En html existe un control llamado select y algunos lo llaman combobox, el cual nos ayuda a crear una lista desplegable con opciones para que nuestros usuarios puedan seleccionar de esta lista una opción.

Pongamos un ejemplo para entender mejor estas opciones, si tenemos un formulario donde los usuarios deben seleccionar el automóvil de su preferencia tendríamos algo como se muestra a continuación:

<select id="slcAutos" >
<option value="Ford Focus">Selecciona tu automóvil preferido</option>
 <option value="Ford Focus"> Ford Focus</option>
<option value="Kia Rio">Kia Rio</option>
<option value="Honda CR-V">Honda CR-V</option>
<option value="Mazda 3">Mazda 3</option>
<option value="Seat Tarraco">Seat Tarraco</option>
<option value="BMW Serie 3">BMW Serie 3</option>
<option value="Toyota Corolla">Toyota Corolla</option>
 </select>

Con este select podemos trabajar con el método change, que se disparará cuando el usuario seleccione una opción y obtener el valor seleccionado, como se muestra a continuación

Javascript

var slcchange = document.getElementById("slcAutos");
slcchange.addEventListener("change", function() {
    console.log(slcchange.value)
});

Ver Demo

En el código anterior con Javascript lo que hacemos es asignar a la variable slcchange el elemento select y después a este le agregamos que cuando el evento change se dispare nos escriba en la consola del navegador el valor seleccionado, el siguiente ejemplo hacemos lo mismo pero con jQuery.

jQuery

$("#slcAutos").change(function() {
  console.log($("#slcAutos").val());
});

Ver Demo

Establecer el valor al select:

Javascript

document.getElementById("slcAutos").value = "Toyota Corolla";

Ver Demo

jQuery

$("#slcAutos").val("Mazda 3");

Ver Demo

Ahora podemos modificar los valores seleccionados en un select o combobox y podemos obtener los valores establecidos cuando un usuario cambia la selección en el select.

Si tienes dudas o comentarios mándame un mensaje y te responderé de inmediato.

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;