创建动态选择（下拉）列表的最佳方式？答案

【问题标题】：Best way to create a dynamic Select (Dropdown) list?创建动态选择（下拉）列表的最佳方式？
【发布时间】：2009-02-27 15:25:11
【问题描述】：

我正在使用 jQuery 和 jqGrid。

我正在尝试动态填充一个选择列表，每行一个，我需要向它添加一个点击事件。 When the select list is being populated I grab the index of the item I want selected, and then after all items are add I'm trying to set the selected item.

我试过了

$("#taskList")[0].selectedIndex = taskIndex;
$("#taskList").selectOptions(taskIndex, true);
$("#taskList").val(1); //Tried to see if I could select any index and no luck.
$("#taskList option[value=" + taskIndex + "]").attr("selected", true);

所以这意味着我可能错误地填充了列表...

var taskList = document.createElement("select");
var taskIndex = 0;
for (var i = 0; i < result.TaskTypes.length; i++) {
   $(taskList).addOption(result.TaskTypes[i].TaskId, result.TaskTypes[i].TaskName);
   if (result.TaskTypes[i].TaskName == rowData.TaskType)
    taskIndex = i;
}

有没有更好的办法？

我试过这个，但我无法向它添加点击事件。但是选择了正确的项目。

var taskList = "<select name='taskList' Enabled='true'>";
for (var i = 0; i < result.TaskTypes.length; i++) {
    if (result.TaskTypes[i].TaskName == rowData.TaskType)
        taskList += "<option selected> " + result.TaskTypes[i].TaskName + "</option>";
    else
    taskList += "<option>" + result.TaskTypes[i].TaskName + "</option>";
}
taskList += "</select>";

【问题讨论】：

标签： javascript jquery list drop-down-menu selectlist

【解决方案1】：

在您的第一个示例中，我会采用的方法是使用 DOM API，而不是为 addOption 使用 jQuery API，如下所示：

var option = document.createElement("option");
option.innerHTML = result.TaskTypes[i].TaskName;
option.value = result.TaskTypes[i].TaskId;
option.onclick = myClickHandler;
taskList.add(option, null);

然后在循环之后你就可以使用了：

taskList.selectedIndex = taskIndex;

将选择列表定位到所需的默认选择。

我没有广泛使用 jQuery，但我认为不要忽视 DOM API 是个好主意——它通常不如 jQuery 和其他库提供的快捷方式方便，但这些扩展了 DOM 功能，不应该代替DOM。

【讨论】：

不工作... taskList.add(option);抛出异常。 “htmlfile：无效的参数。”改为 $(taskList).add(option);在我更改它之后，它没有向 taskList 添加项目。 Checked 和 innerHTML 和 Value 正在设置中。想法？？
我的 add() 也失败了，不知道为什么 - 它是一个记录在案的 API。无论如何，DOM 方法 appendChild() 对我来说非常有用。
嗯。您可能希望使用 taskList.add(option,null) 将选项添加到列表底部。使用单个参数调用它确实不起作用（我假设最后一个参数是可选的并且默认为 null）。
好消息坏消息....好- appendChild() 有效。不好 - 仍然无法设置我想要选择的项目。 --> 真棒:(
我刚刚编辑了我的答案，我想你会在那里找到你需要的所有细节:-)

【解决方案2】：

您可以像这样设置选定的索引：

$("#taskList").selectedIndex = taskIndex;

【讨论】：

啊，您的选择中没有 id="taskList" - 这就是它不起作用的原因
确实，如果您只是将id="taskList" 添加到选择元素，这应该可以解决问题。
试过 var taskList = document.createElement("select"); $(taskList).attr({ id: "taskList" });没有运气
将 id 放入您的标记中。如果您必须通过 JavaScript 执行此操作，那么您正在寻找以下之一： $('') 或者，如果您已经拥有元素： taskList.attr('id', 'taskList' )。如果您仍然感到困惑，请查找“attr”的文档（无论如何这是个好主意，实际上:)）。
是的，我通常会尝试这样做。尝试过，但定义了 ID 并没有帮助。我最终在标记中添加了一个 OnClick。不过还是谢谢。

【解决方案3】：

属于“更好的方式”类别，JQuery 允许您使用 each loop 而不是手动创建 for 循环。

jQuery.each(result.TaskTypes, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });

【讨论】：

也试过了。没运气。关于“$("#" + i)”的快速问题。它如何知道要附加到哪个元素。我需要做这样的事情.. $("#taskList " + i) ???谢谢

【解决方案4】：

知道了 - 8 小时后很好。

var taskList = "<select name='taskList' Enabled='true' onClick='$(\"#hoursBx\").valid()' >";
for (var i = 0; i < result.TaskTypes.length; i++) {
    if (result.TaskTypes[i].TaskName == rowData.TaskType)
        taskList += "<option selected> " + result.TaskTypes[i].TaskName + "</option>";
    else
        taskList += "<option>" + result.TaskTypes[i].TaskName + "</option>";
}
taskList += "</select>";

我正在使用jQuery's Validator 来验证 $("#hoursBx")（当前行中的文本框）中的值。

添加 onClick 有效。

【讨论】：

字符串连接在'for'循环中可能会很慢，而不是附加到数组并在末尾加入var htmlArray = []; htmlArray.push("<option selected>",text,"</option>"); var html = htmlArray.join("");