javascript - 创建动态选择(下拉)列表的最佳方法？

Question

我正在使用 jQuery 和 jqGrid。

我正在尝试动态填充一个选择列表，每一行一个，我需要向其中添加一个单击事件。当填充选择列表时，我获取要选择的项目的索引，然后在添加所有项目后，我尝试设置所选项目。

我已经尝试过

$("#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>";

Answer 1

我的做法是在第一个示例中 - 不要使用 jQuery API 来实现 addOption，而是使用 DOM 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 的。