<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<style>
body{background-color:orange;}
select,input[type='submit'], input[type='number']{
width:20em;
height:3em;
background-color:coral;
font-size: 1.5em;
font-weight: bold;
margin-left: 12em;
margin-top:1em;
}
p, input[type="file"]{
font-size: 1.5em;
font-weight: bold;
margin-left: 12em;
}
input[type='text']{
width:10.5em;
height:2em;
font-size: 1.5em;
font-weight: bold;
margin-top:0.4em;
}
/*input[type='submit']{
}*/
</style>
</head>
<body>
<form action="output2.php" method="post">
<select class="menu" name="product">
<option value="select">seleziona articolo</option>
<option value="scarpe">scarpe</option>
<option value="magliette">magliette</option>
</select>
<div id="" class="scarpe">
<select name="scarpe" class="submenu1">
<option value="select">selezione genere</option>
<option value="scarpe_maschio">maschio</option>
<option value="scarpe_femmina">femmina</option>
</select>
</div>
<div id="" class="magliette">
<select name="sesso_magliette" class="submenu2">
<option value="select">seleziona genere</option>
<option value="magliette_maschio">maschio</option>
<option value="magliette_femmina">femmina</option>
</select>
</div>
<!-- opzioni del submenu-->
<div id="opt" class="num_scarpe scarpe_femmina scarpe_maschio">
<p>seleziona numero di scarpe</p>
<input type="number" name="scarpe_num" class="" value=0>
</div>
<div id="opt2" class="misure_magliette magliette_femmina magliette_maschio">
<select name="misure_magliette" class="submenu misure_magliette">
<option value="select">seleziona taglia</option>
<option value="xs">xs</option>
<option value="s">s</option>
<option value="m">m</option>
<option value="l">l</option>
<option value="xl">xl</option>
</select>
</div>
<input type="file" name="file">
<div id="galleria">
</div>
<input type="submit" name="submit">
</form>
</body>
<script type="text/javascript">
$(".menu").siblings().hide();
$("input[type='submit']").show();
$("input[type='file']").show();
//$('.menu, .submenu, .scarpe').val('select');
$(".menu, .submenu1, .submenu2, .misure_magliette").on("change", function(){
val = $(this).val();
console.log(val);
$("."+val).show();
console.log($(this).attr("class"));
if($(this).attr("class") == "menu"){
$("."+val).show();
$("."+val).siblings().hide();
$("input[type='submit']").show();
$("input[type='file']").show();
$(".menu").show();
console.log("ok")
/*
val = $(this).val();
console.log(val);*/
}
// $("."+val).val('select');
// $("."+val).siblings().hide();
})
$("input[type='number']").mouseout(function(){
console.log($(this).val());
})
$("input[type='submit']").mouseover(function(){
})
</script>
</html>