0

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>

1
  • 1
    No deberías tener jamás más de un elemento con el mismo id. Deberían ser únicos. Quizás podrías reescribir el HTML usando class 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().
    – Mariano
    Commented el 13 oct. 2016 a las 12:37

2 respuestas 2

1

Si de verdad necesitas llamar los selects de SUBCATEGORIA con id, esta es una solución:

function cambiar() {
	var x = document.getElementById("SUBCATEGORIA");
	var vacio = new Option("Elige una opción","");
	x.options[x.options.length] = vacio;
	x.selectedIndex = vacio;
}
function mostrar(){
	var categoria = document.getElementById("CATEGORIA").value;
	var x = document.getElementById("SUBCATEGORIA");	
	var i;
	for (i = 0; i < x.length; i++) {
		if (x.options[i].id == categoria){
		    x.options[i].style.display = 'block';
		} else {
		    x.options[i].style.display = 'none';
		}
	}
	if (categoria == 2 || categoria == null) {
		var vacio = new Option("Elige una opción","");
		x.options[x.options.length] = vacio;
		x.selectedIndex = vacio;
	}
}
<form method="get" action="try.html">
<select name="CATEGORIA" id="CATEGORIA" onchange="cambiar()" onClick="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>

1
  • Es una mala práctica dar el mismo id a varios elementos, como lo dice el mismo nombre, un id es algo único. JS y jQuery funcionan mal, podrían dar resultados inesperados cuando usamos el mismo id para más de un elemento.
    – A. Cedano
    Commented el 15 mar. 2017 a las 23:46
-1

Puedes usar jquery para eso. con .hide y .show.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

1
  • 1
    la solución requerida es con javascript, no jquery
    – Rene Limon
    Commented el 22 nov. 2016 a las 16:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.