Лучший способ создать динамический список выбора (раскрывающегося списка)?

Question

Я использую jQuery и jqGrid.

Я пытаюсь заполнить список выбора динамически, по одному для каждой строки, и мне нужно добавить к нему событие click. Когда список выбора заполняется, я захватываю индекс элемента, который я хочу выбрать, а затем после того, как все элементы добавляются, я пытаюсь установить выбранный элемент.

Я попытался

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

Есть ли лучший способ?

Я пробовал это, но я не мог добавить к нему событие click. Однако был выбран правильный элемент.

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

Got это- хороший твердый через 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.

Answer 2

Падающие под категорию «лучший способ», JQuery позволяет использовать each loop вместо создания для петель вручную.

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

Answer 3

Как я сделал бы это, в первом примере - вместо того, чтобы использовать API JQuery для 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.

Answer 4

Вы можете установить выбранный индекс, как это:

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