点击按需填充后,选择下拉列表会消失

时间:2012-04-23 20:08:12

标签: jquery ajax jquery-ui select

我正在填充我的选择列表/按需删除,由于某种原因,该列表在MouseUp上消失。

填充列表的代码:

<select id="UserList" name="UserList" onclick="getCountries()">.....</select> 
.
.
.
        function getCountries() {
        $.post("/Users/GetUsersJson/", { id: userId },
        function (result) {

            $.each(result, function (item) {
                $("#UserList").append(
                $("<option></option>").text(result[item].UserName).val(result[item].Id)
                );
            });

        }, "json");
    }

当我点击列表时,它会被填充得很好但是当我释放鼠标按钮时它关闭而不让我选择列表中的任何内容。 我无法弄清楚发生了什么。

任何线索?

2 个答案:

答案 0 :(得分:1)

我看不到任何可能导致您的下拉列表消失的内容,因此我建议您放入一些警告框,以便您可以准确确定触发问题的线路。也就是说,您应该知道每个方法都可以使用jquery。

function getCountries() {
    $.post("/Users/GetUsersJson/", { id: userId },
    function (result) {

        $.each(result, function (index, item) {
            $("#UserList").append(
            $("<option></option>").text(item.UserName).val(item.Id)
            );
        });

    }, "json");
}

使您的代码更容易阅读。

答案 1 :(得分:0)

HTML:

<select id="UserList" name="UserList"></select> 

jQuery的:

$(document).ready(function(e){

    $('#UserList').click(function(e){
        if($(this).children().length == 0){
            $.post("/Users/GetUsersJson/", { id: userId },
            function (result) {

                $.each(result, function (item) {
                    $("#UserList").append("<option val='"+result[item].Id+"'>"+result[item].UserName+"</option>");
                });

            }, "json");
        }
    });
});

尝试以上方法:

弹出窗口消失的原因是当您单击下拉列表时,它将对JSON数据发出另一个GET请求并重新填充SELECT。我添加了children()长度的检查,以确保内部没有<option>个标记。