Untitled


<!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>