选择菜单在 AJAX 中表现异常答案

【问题标题】：Select menu behaving strangely with AJAX选择菜单在 AJAX 中表现异常
【发布时间】：2013-11-30 23:38:41
【问题描述】：

我有一个动态填充选项的下拉列表：

function populateDropdown(dropdownNum) {
// invokeWebService uses $.ajax
json = invokeWebService("GET", "/webservice/dropwdownOptions");
optionsHtml = "";

$.each(json, function(count, jsObj) {
             optionValue = jsObj.name
             optionsHtml+="<option>" + optionValue + "</option>";
             });

var dropdownId = "#NRdropdown_" + dropdownNum;
$(dropdownId).html(optionsHtml);
}

function display(blockNum) {
var url = "/webservice/blocks" + blockNum;
var response = invokeWebService("GET", url);

var replacementHtml = "";
var currBlock = "blah";

$.each(response, function(i, block) {
                 currName = block.name;
                 var textfield = "<input type='text' id='blockValue" + block.id +
                                 "'>";
                 var dropdownMenu = "<select id=\"NRdropdown_" + i + 
                                    "\"onClick=\"populateDropDown(" + i +
                                    ")\"><option>Existing Blocks</option>"

                 var submitButton = "<input type='submit' value='UPDATE' id='" +
                                    block.id + "'><br><br>";

                 replacementHtml = currName + textfield + dropdownMenu + submitButton;
                 });
$("#main").html(replacementHtml);
}

javascript函数“populateDropdown(dropdownNum)”：

发出 ajax 请求
将选项值的 json 响应解析为名为 optionsHtml 的 html 字符串

用选项值替换select元素的内部html：

var dropdownSelector = "#NRdropdown_" + dropdownNum;
$(dropdownSelector).html(optionsHtml)

1) 当我点击下拉箭头时，我仍然看到“现有块”。
2) 1 秒后，我在“现有块”选项下方看到第一个动态生成的选项，我看不到其他动态生成的选项。
3) 然后我在下拉列表外部单击，然后看到 dropdwon 显示第一个动态生成的值。
4) 最后，我再次单击下拉箭头，它可以正常处理所有动态生成的值。

我如何使它工作，以便：

页面首次加载时，下拉菜单显示“现有块”。
单击下拉箭头后，下拉列表应显示所有动态生成的值，而没有“现有块”值。

谢谢！

【问题讨论】：

首先，确保您正在关闭
是的，我正在关闭代码中的选择标签，但忘记在我的帖子中添加它。我在 for 循环中生成这些下拉列表，因为（这与我的问题无关）但我有多行，其中每一行由我的下拉列表和一个文本字段组成。这些行由 for 循环生成，每个下拉菜单的选项也用 for 循环填充。
你也能展示一下 for 循环吗？
我已经添加了完整的代码 bagonyi

标签： javascript jquery ajax

【解决方案1】：

下拉监听器应该用于 onmousedown，而不是 onclick

【讨论】：