Question

我有一个下拉列表，其选项会动态填充：

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

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

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

1）当我点击下拉箭头时，我仍然看到“现有积木” 2）1秒后我看到第一个动态生成的选项UNDERNEATH“现有块”选项，我没有看到其他动态生成的选项。
3）然后我在下拉列表外单击，看到dropdwon显示第一个动态生成的值 4）最后，我再次单击下拉箭头，它将按原样运行所有动态生成的值。

如何让它发挥作用：

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

谢谢！

Answer 1

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

使用AJAX选择菜单表现奇怪

1 个答案: