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.