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í:

See the gist on github.

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í:

See the gist on github.

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.

See the gist on github.

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.