Question

如果尚未进行第一次选择，如何隐藏第二个选择。这是我的代码

<!DOCTYPE html>
<html>
    <head>

    <script src="js/jquery-1.7.1.min.js"></script>

    <script>
    $(document).ready(function(){
        $("#select1").change(function() { 
            if($(this).data('options') == undefined){
                /*Taking an array of all options-2 and kind of embedding it on the select1*/
                $(this).data('options',$('#select2 option').clone());
            } 

            var id = $(this).val();
            var options = $(this).data('options').filter('[value=' + id + ']');

            $('#select2').html(options);
        });
    });

    </script>

    </head>

    <body>
        <select name="select1" id="select1">
            <option value="3"></option>
            <option value="1">IT</option>
            <option value="2">Management</option>
        </select>
        <select name="select2" id="select2">
            <option value="3"></option>
            <option value="1">Programmer</option>
            <option value="1">Technician</option>
            <option value="2">HR</option>
            <option value="2">Secretary</option>
        </select>
    </body>
</html>

Answer 1

默认情况下，使用css隐藏第二个选项，并在从#select1

中选择内容时显示它

CSS：

#select2 { display:none }

jQuery的：

$(document).on('change', '#select1', function() {
    $('#select2').show();
    // ....
});

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/jrst4qg8/

<强> JS： -

$(document).ready(function(){
        $("#select1").change(function() { 
            if(this.value != 3){
                $("#select2").show();
            }
            else
            {
                $("#select2").hide();
            }
            if($(this).data('options') == undefined){
                /*Taking an array of all options-2 and kind of embedding it on the select1*/
                $(this).data('options',$('#select2 option').clone());
            } 

            var id = $(this).val();
            var options = $(this).data('options').filter('[value=' + id + ']');

            $('#select2').html(options);
        });
    });

<强> CSS： -

#select2 { display:none }

Answer 3

您必须使用CSS进行初始显示，即默认情况下应隐藏第二个下拉列表。

CSS代码：

#select2 {
            display: none;
}

虽然您可以使用jquery隐藏第二个下拉列表，但不推荐使用，因为首次加载页面时，HTML将与css属性一起加载，然后加载js文件。

jQuery代码：

$("#select2").hide();

然后，您需要根据第一个下拉列表中选择的选项使用jQuery显示/隐藏第二个下拉列表。

jQuery代码：

$(this).val() != 3 ? $("#select2").show() : $("#select2").hide();

<强> jsfiddle Demo

隐藏第二个Jquery选择

3 个答案:

试试这个： - http://jsfiddle.net/adiioo7/jrst4qg8/