Question

I have created this form with several select menu and a couple of jQuery hide and show functions. The way the form is supposed to work is that, when you click on the options from the main select menu it sould autimatically show you the corresponding select submenu.
Here is my code:

jQuery:

    $("#mankleding").bind("click",menclothes);
    $("#manschoen").bind("click",menshoes);
    $("#manaccessoires").bind("click",menaccessoires);

    function menclothes(evt){

    $("#subkledingheren").show("fast");
    $("#subschoenenheren").hide("fast");
    $("#subsaccessoiresheren").hide("fast");
    }

    function menshoes(evt){

    $("#subkledingheren").hide("fast");
    $("#subschoenenheren").show("fast");
    $("#subsaccessoiresheren").hide("fast");
    }

    function menaccessoires(evt){

    $("#subkledingheren").hide("fast");
    $("#subschoenenheren").hide("fast");
    $("#subsaccessoiresheren").show("fast");

    }

HTML:

    <tr>
        <td> Artikel hoofd-categorie:   </td> <td> <select id="manhoofd">
                                <option>HEREN</option>
                                <option id="mankleding">KLEDING</option>
                                <option id="manschoen">SCHOENEN</option>
                                <option id="manaccessoires">ACCESSOIRES</option>
                               </select>
                              </td>
    </tr>
    <tr>
        <td> Artikel sub-categorie:     </td> <td id="subcategorie"> <select id="subkledingheren">
                                <option>HEREN-KLEDING</option>
                                <option>Broeken & Jeans</option>
                                <option>Jassen</option>
                                <option>Sweaters & Hoodies</option>
                                <option>Zwemkleding</option>
                               </select>

                               <select id="subschoenenheren">
                                <option>HEREN-SCHOENEN</option>
                                <option>Sneakers / Casual</option>
                                <option>Slippers & Sandalen</option>
                                <option>Instappers</option>
                               </select>

                               <select id="subsaccessoiresheren">
                                <option>HEREN-ACCESSOIRES</option>
                                <option>Horloges</option>
                                <option>Brillen & Zonnebrillen</option>
                                <option>Stropdassen</option>
                               </select>

                              </td>
    </tr>

Answer 1

Try using change event:

$('#manhoofd').change(function(){
    var i = $('option:selected', this).text();
    $('select(:not(:first))').hide();
    $('select:contains('+i+')').show()          
})

DEMO