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

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

2 голосов
/ 27 февраля 2009

Я использую 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>";

Ответы [ 4 ]

4 голосов
/ 27 февраля 2009

То, как я бы это сделал, приведено в вашем первом примере - вместо использования 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 широко, но я думаю, что не стоит пренебрегать API DOM - это часто не так удобно, как ярлыки, которые предлагают jQuery и другие библиотеки, но они расширяют возможности DOM и не должны появляться вместо этого. DOM.

2 голосов
/ 27 февраля 2009

Вы можете установить выбранный индекс следующим образом: 

$("#taskList").selectedIndex = taskIndex;
2 голосов
/ 27 февраля 2009

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

jQuery.each(result.TaskTypes, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });
0 голосов
/ 27 февраля 2009

Получил - хорошее твердое вещество через 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 , чтобы проверить значение в $ ("# hoursBx") (текстовое поле в текущей строке).

Добавление onClick работает.

...