Question

以下是两个基于其选项值级联的下拉列表

$(document).ready(function(){
    $("#s1").change(function(){
        $("#s2").val($("#s1").val())
    });
});

<select id="s1">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
    <option value="4">d</option>
</select>

<select id="s2">
    <option value="1">a2</option>
    <option value="1">a3</option>
    <option value="2">b2</option>
    <option value="2">b3</option>
    <option value="3">c2</option>
    <option value="3">c3</option>
    <option value="4">d2</option>
    <option value="4">d3</option>
</select>

$("#s2")中显示所有选项，而不考虑元素$("#s1")中选择的选项。

Answer 1

试试这段代码

         $("#s1").change(function(){
            //$("#s2").val($("#s1").val())
            var val=$("#s1").val();

            $("#s2 option").each(function(){
                if($(this).val()!=val)
                {
                    $(this).hide();
                }
                else
                {
                    $(this).show();
                }
            });
            $("#s2").val($("#s1").val());


        });

Answer 2

$(document).ready(function () {
    $("#s1").change(function () {
        $("#s2 option").hide();
        $("#s2 option[value="+$("#s1").val()+"]").show();
        $("#s2").val($("#s1").val());
    }).trigger("change");
});

Example Fiddle

如何根据列表值级联下拉列表

2 个答案: