Hide and show with JavaScript

Question

Hide and show with JavaScript

Navigation

#1 by (2 votes)
#2 by (-1 votes)

1

I have a doubt as to hide and show certain options of a subcategory, for example I have clothes category and its subcategory will have a id="ropa" in which will be socks, shirts etc. and I will have other categories with their respective subcategories.

Below I show you the code that I'm trying to use but it does not work I do not understand why (I'm a newbie in 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>

javascript html5

asked by Kevin Melendez 09.10.2016 в 18:31

source

2 answers

Error method post Requests in python Error starting the NodeJS server

score 2 · Answer 1

If you really need to call the selects of SUBCATEGORIA with id, this is a solution:

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>

score -1 · Answer 2

You can use jquery for that. with .hide and .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>