Question

我需要显示特定的下拉列表，并根据父下拉列表中的选择隐藏其他下拉列表。例如，我有父下拉列表，其中将进行选择：

<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");
                });

对话框表格包含所有下拉列表

Answer 1

$("#DropDownList1").change(function(){
    indx = $("#DropDownList1 option:selected").index();
    indx +=1;
    $("#DropDownList2,#DropDownList3,#DropDownList4").each(function(){
       $(this).hide();
    });
   $("#DropDownList"+(indx+1)).show()
})

Answer 2

$('#DropDownList1').change(function(){
    id = $(this).val().replace('Scheme',''); //get id
    $('#DropDownList2,#DropDownList3,#DropDownList4').hide();
    $('#DropDownList'+id).show();
})

Answer 3

我会修改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();

});

View demo

根据使用jquery选择另一个下拉列表显示/隐藏下拉列表

3 个答案: