MaterializeCSS

Establecer opción seleccionada en Select con MaterializeCSS y jQuery

Introducción

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.

Seleccionar opción en select con MaterializeCSS

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.

Ejemplo para poner valor en un select

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
 });
 
});

Demostración en codepen

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.