1

我用几个选择菜单和几个 jQuery 隐藏和显示功能创建了这个表单。该表单的工作方式是，当您单击主选择菜单中的选项时，它会自动向您显示相应的选择子菜单。 这是我的代码：

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

1 回答 1

1

尝试使用change事件：

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

演示

于 2012-07-14T01:03:03.163 回答