0

親のドロップダウンリストで行った選択に基づいて、特定のドロップダウンリストを表示し、他のドロップダウンリストを非表示にする必要があります。たとえば、選択が行われる親のドロップダウンリストがあります。

<select id="DropDownList1">
                    <option value="Schemes1">Schemes1</option>
                    <option value="Schemes2">Schemes2</option>
                    <option value="Schemes3">Schemes3</option>
                </select>

他の3つのリストは次のとおりです。

                <p>Schemes1 List</p>
                <select id="DropDownList2">
                <option value="product1">Camera</option>
                <option value="product2">DVD</option>
                <option value="product3">AC</option>
            </select>
            <p>Schemes2 List</p>
                <select id="DropDownList3">
                <option value="product4">bat</option>
                <option value="product5">ball</option>
                <option value="product6">complete kit</option>
            </select>
            <p>Schemes3 List</p>
                <select id="DropDownList4">
                <option value="product7">laptop</option>
                <option value="product8">HD</option>
                <option value="product9">RAM</option>
            </select>

したがって、scheme1が選択されている場合は、scheme1リストを表示し、他のリストは非表示にする必要があります。jqueryを使用してこれを機能させる方法に関するアイデア

更新しました ：

 $('#login').click(function (e) {
                    e.preventDefault();

                    $("#dialog-form").dialog("open");
                });

ダイアログフォームにはすべてのドロップダウンリストがあります

4

3 に答える 3

1 
$("#DropDownList1").change(function(){
    indx = $("#DropDownList1 option:selected").index();
    indx +=1;
    $("#DropDownList2,#DropDownList3,#DropDownList4").each(function(){
       $(this).hide();
    });
   $("#DropDownList"+(indx+1)).show()
})
于 2012-05-02T13:17:25.197 に答える
1 
$('#DropDownList1').change(function(){
    id = $(this).val().replace('Scheme',''); //get id
    $('#DropDownList2,#DropDownList3,#DropDownList4').hide();
    $('#DropDownList'+id).show();
})
于 2012-05-02T13:22:48.433 に答える
0

HTMLを変更して、JavaScriptを単純化します。

HTML

<select id="DropDownList1">
     <option value="DropDownList2">Schemes1</option>
     <option value="DropDownList3">Schemes2</option>
     <option value="DropDownList4">Schemes3</option>
</select>

<p>The other 3 list are:</p>

<p>Schemes1 List</p>
<select id="DropDownList2" class="toggledDropDown">
    <option value="product1">Camera</option>
    <option value="product2">DVD</option>
    <option value="product3">AC</option>
</select>

<p>Schemes2 List</p>
<select id="DropDownList3" class="toggledDropDown">
    <option value="product4">bat</option>
    <option value="product5">ball</option>
    <option value="product6">complete kit</option>
</select>

<p>Schemes3 List</p>
<select id="DropDownList4" class="toggledDropDown">
    <option value="product7">laptop</option>
    <option value="product8">HD</option>
    <option value="product9">RAM</option>
</select>​

JavaScript

$('#DropDownList1').change(function() {

    // Hide all drop downs sharing the CSS class "toggledDropDown".
    $('.toggledDropDown').hide();

    // Build a selector for the selected drop down
    var selector = ('#' + $(this).val());

    // Show the selected drop down
    $(selector).show();

});

デモを見る

于 2012-05-02T13:35:59.783 に答える