Question

我是JQUERY的新手

我正在尝试下拉列表项但是如果我使用JQUERY.EMPTY清除点击列表中的下拉列表，我无法在下拉列表中选择项目

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#test").click(function() {
            var opt = ["AP", "BP", "KP", "CS", "gh", "kol", "op"]
            $.each(opt, function(i, val) {
                $("#test").append(
                    $('<option></option>').val(i).html(val)
                );
            });
        });
    });
</script>
</head>

<body>
    <select id="test">
        <option value="0">--Select--</option>
    </select>
</body>

</html>

Answer 1

这是您正确的解决方案。您的问题是您在下拉列表中调用了empty（），但是当您选择选项时，它会再次被清除并重新填充，因为它也算作下拉单击。因此我放了一个if检查是否单击了select，如果是，则清空它，否则不执行（如果实际单击了选项）。我相信这就是你想要的。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test").click(function(e){

    var $target = $(e.target);
    if($target.attr("id") == "test")
    {
        $(this).empty();
        var opt=["AP","BP","KP","CS","gh","kol","op"]
        $.each(opt,function(i,val){
        $("#test").append(
        $('<option></option>').val(i).html(val)
        );
        });

    }
});
});
</script>
</head>
<body>
<select id="test">
<option value="0">--Select--</option>
</select>
</body>
</html>

Answer 2

你应该尝试这个

$(document).ready(function() {
        $("#test").click(function() {
            $("#test").empty();
            $("#test").append($("<option value='0'>--Select--</option>"));
            var opt = ["AP", "BP", "KP", "CS", "gh", "kol", "op"]
            $.each(opt, function(i, val) {
                $("#test").append(
                    $("<option>"+val+"</option>")
                );
            });
        });
    });

Jquery.empty（）不允许在下拉列表中选择项目

2 个答案: