Tengo una duda en cuanto a ocultar y mostrar ciertas opciones de una subcategoría, por ejemplo tengo categoría de ropa y su subcategoría tendrá un id="ropa"
en los cuales estarán calcetines, camisetas etc. y tendré otras categorías con sus respectivas subcategorias.
Abajo les muestro el código que estoy tratando de usar pero no funciona no entiendo porque (Soy novato en javascript).
function mostrar(){
var x = document.getElementsByName("Videojuegos y diversión");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = 'true';
}
}
<form method="get" action="try.html">
<select name="CATEGORIA" id="CATEGORIA" onchange="mostrar()" required>
<option selected value="2"> Elige una opción </option>
<option value="Electrónicos">Electrónicos</option>
<option value="Videojuegos y diversión">Videojuegos y diversión</option>
</optgroup>
</select>
<select name="SUBCATEGORIA" id="SUBCATEGORIA" required>
<option selected value=""> Elige una opción </option>
<option value="Accesorios videojuegos" style='display:none;' id="Videojuegos y diversión" >Accesorios videojuegos</option>
<option value="Consolas" style='display:none;' style='display:none;' id="Videojuegos y diversión" >Consolas</option>
<option value="Deportes y actividades al aire libre" style='display:none;' id="Videojuegos y diversión">Deportes y actividades al aire libre</option>
<option value="Videojuegos" style='display:none;' id="Videojuegos y diversión">Videojuegos</option>
<option value="Accesorios videojuegos" style='display:none;' id="Electrónicos" >TV</option>
<option value="Accesorios videojuegos" style='display:none;' id="Electrónicos" >Eqipo de sonido</option>
</optgroup>
</select>
<input type="submit" name="">
</form>
id
. Deberían ser únicos. Quizás podrías reescribir el HTML usandoclass
para marcar elementos dentro de una misma categoría:<option value="..." class="videojuegosdiversion" ...>
. Y luego, obtendrías todos los elementos de una clase con.getElementsByClassName()
.