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 に答える