Hacer que un select tenga una opción seleccionada con jQuery es una tarea fácil, lo mismo que con MaterializeCSS. Sólo que para que éste último funcione, debemos refrescar el select para que tome la opción que le dimos.
Seleccionamos el elemento HTML utilizando jQuery, y le ponemos el valor como lo haríamos con cualquier otro select. Pero después de esto, llamamos a material_select para que los cambios se refresquen. Así:
var valor = 1;
$("#miSelect").val(valor);
$("#miSelect").material_select();
En este caso, se supone que el select tiene el id miSelect.
Recuerda que el valor que le pongamos debe ser un valor que esté en las opciones. Es decir, no puedes poner un valor que el select no tenga en sus opciones.
Mira el ejemplo de abajo.
Vamos a poner un select y dos botones con los que podremos cambiar la opción del select sin que el usuario tenga que hacer click en él. El código HTML queda así:
<div class="container">
<div class="section">
<div class="row">
<div class="input-field col s12">
<select name="miSelect" id="miSelect">
<option value="" selected disabled>¿Cuál es tu comida favorita?</option>
<option value="1">Tacos</option>
<option value="2">Pizza</option>
</select>
</div>
<div class="input-field col s12">
<button id="seleccionarTacos" class="waves-effect waves-light btn blue">Seleccionar tacos</button>
<button id="seleccionarPizza" class="waves-effect waves-light btn green">Seleccionar pizza</button>
</div>
</div>
</div>
</div>
Más tarde, en el script esperamos a que el documento esté listo. Iniciamos el componente y escuchamos el click de los botones.
Cuando se hace click en cualquier botón, se selecciona la opción 1 o 2. Si vemos las opciones del select, podemos ver que en el atributo value tienen esos números. Lo que quiero dar a entender es que no debemos seleccionar ningún valor que no esté en las opciones.
$(function(){
$("#miSelect").material_select(); //Iniciar componente
/*
Escuchar clicks de botones
*/ $("#seleccionarTacos").click(function(){
$("#miSelect").val(1);
$("#miSelect").material_select(); // Refrescar
});
$("#seleccionarPizza").click(function(){
$("#miSelect").val(2);
$("#miSelect").material_select(); // Refrescar
});
});
Aquí dejo un pen para probar lo que acabamos de hacer.
See the Pen Seleccionar opción en select con materializecss by Luis Cabrera Benito (@parzibyte) on CodePen.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.