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)
});
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());
});
Establecer el valor al select:
Javascript
document.getElementById("slcAutos").value = "Toyota Corolla";
jQuery
$("#slcAutos").val("Mazda 3");
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.
.png)
