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

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

Curso gratuito de JavaScript

Curso gratuito de JavaScript

Tutorial para aprender JavaScript de forma sencilla viendo un concepto teórico, luego algunos ejemplos resueltos y por último y lo más importante, efectuar una serie de ejemplos tu solo. Este curso es complementario al curso gratuito de HTML5 y el curso de CSS3

Ver artículo completo
Las variables de JavaScript (Tutorial de JavaScript)

Las variables de JavaScript (Tutorial de JavaScript)

Resumen: en este tutorial, aprenderás sobre las variables de JavaScript y cómo usar variables para almacenar valores en una aplicación JavaScript.

Ver artículo completo
Qué son las funciones anónimas de JavaScript

Qué son las funciones anónimas de JavaScript

Resumen: en este tutorial, aprenderás sobre las funciones anónimas de JavaScript.

Ver artículo completo

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