按需填充时单击后选择下拉列表消失答案

【问题标题】：Select drop down list disappears after click when populating on demand按需填充时单击后选择下拉列表消失
【发布时间】：2012-05-04 11:24:23
【问题描述】：

我正在填充我的选择列表/按需放置，但由于某种原因，该列表在 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");
    }

当我单击列表时，它会很好地填充，但是当我释放鼠标按钮时它会关闭，而不会让我选择列表中的任何内容。我不知道发生了什么。

有什么线索吗？

【问题讨论】：

为什么要在点击事件中这样做？在加载时执行它会不会更好，以便它自动完成并且只完成一次？或者，如果它依赖于来自表单不同部分的变量，那么在更改其他变量时调用它可能会更好。
这就是我开始的方式，但被告知要使用点击事件重新执行此操作，因为加载到该下拉菜单中的数据量“可能会减慢页面速度”。
如果可以的话，试试mousedown，看看效果好不好。此外，您需要一种方法来防止它再次加载所有内容，或者在重新填充之前清除下拉列表。

标签： jquery ajax jquery-ui select

【解决方案1】：

我看不到任何会导致您的下拉列表消失的内容，因此我建议您放入一些警告框，以便您可以准确地确定是哪一行触发了问题。也就是说，您应该知道，使用 jquery each 方法可以做到这一点。

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");
}

使您的代码更易于阅读。

【讨论】：

我现在将列表设置为加载该 div Ajax 加载。我会将这个问题留待一段时间，希望有人知道它可能是什么。
好吧，我很乐意继续为您提供帮助，但我想说的是这段代码应该可以正常工作，这意味着还有其他问题。如果没有更多信息，我不能说什么。
我什至想不出还有什么可能会影响它....该列表出现在 Ajax.ActionLink() 成功时出现的模态 JQuery .dialog() 内部：事件.嗯……
尝试创建一个页面，只包含一个触发此函数调用的按钮和下拉列表。看看它是否仍然消失。

【解决方案2】：

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> 标签。

【讨论】：