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>

因此，如果选择了方案 1，则应显示方案 1 列表，而应隐藏其他列表，反之亦然，有关如何使用 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 回答