創建動態選擇（下拉）列表的最佳方法？

我想動態填充選擇列表，每行一個，我需要添加一個單擊事件。當填充選擇列表時，我抓住要選擇的項目的索引，然後在所有項目都添加後，我嘗試設置所選項目。

我已經試過

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

來源

2009-02-27 Brad8118

得到它 - 一個很好的固體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作品。

來源

2009-02-27 20:26:29 Brad8118

下的「更好的方式」類別下降，JQuery的讓您使用each loop代替手動循環創建的。

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

來源

2009-02-27 15:31:57

也試過了。沒有運氣。快速提問「$（」＃「+ i）」。它如何知道要附加到什麼元素。我需要做這樣的事情。 $（「＃taskList」+ i）??? 謝謝 – Brad8118 2009-02-27 16:22:25

我會做它的方式，是在你的第一個例子 - 而不是使用addOption jQuery的API，使用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。

來源

2009-02-27 15:33:02 Guss

不工作... taskList.add（option）;拋出一個異常。「htmlfile：無效的參數。」更改爲$（taskList）.add（option）; 我沒有添加項目後，我改變了taskList。檢查並設置了innerHTML和Value。想法?? – Brad8118 2009-02-27 16:11:30

我也遇到了add（）錯誤，不知道爲什麼 - 它是一個記錄的API。無論如何，DOM方法appendChild（）對我很好。 – Guss 2009-02-27 16:30:41

呃。您可能想要使用taskList.add（option，null）將選項添加到列表的底部。使用單個參數調用它確實無效（我假設最後一個參數是可選的，並且默認爲null）。 – Guss 2009-02-27 16:35:35

你可以設置所選擇的指數是這樣的：

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

來源

2009-02-27 15:34:07 Greg

創建動態選擇（下拉）列表的最佳方法？

回答

相關問題