JSFiddle - React, Tailwind, and code Playground

by drvy

HTML

<select id="select1" onchange="seleccion(this)">
	<option id="apto">Apto</option>
	<option id="sus">Suspendido</option>
	<option id="nose">No se sabe</option>
</select>

<select id="select2">
	<option selected disabled>-------</option>
	<option class="apto">Aprobado 1</option>
	<option class="apto">Aprobado 2</option>
	
	<option class="sus">Suspendido 1</option>
	<option class="sus">Suspendido 2</option>

	<option class="nose">No se sabe 1</option>
	<option class="nose">No se sabe 2</option>
</select>

JavaScript

var seleccion = (function(item){
	/* Obtener el ID de la opcion selecionada */
	var selected = item.options[item.selectedIndex].id;
	
	/* Obtener los options dentro del segundo select */
	var elementos = document.getElementById('select2').getElementsByTagName('option');
	
	/* Por cada elemento en la lista "elementos" */
	for (var i=0; i<elementos.length; i++){
		/* Si el elemento tiene la misma clase que el id que se ha selecionado */
		if (elementos[i].className === selected){
			/* Le hacemos visible */
			elementos[i].style.display='block';
		} else {
			/* Si no, le ocultamos. */
			elementos[i].style.display='none';
		}
	}
});