Meilleure façon de créer une liste dynamique (liste déroulante)?

Question

J'utilise jQuery et jqGrid.

J'essaie de remplir dynamiquement une liste de sélection, une pour chaque ligne et j'ai besoin d'ajouter un événement click. Lorsque la liste de sélection est remplie, j'attrape l'index de l'élément que je veux sélectionner, puis après que tous les éléments sont ajoutés, j'essaie de définir l'élément sélectionné.

J'ai essayé

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

Donc, cela signifie que je suis probablement peuplant la liste de manière incorrecte ...

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; 
} 

Y at-il une meilleure façon?

J'ai essayé mais je n'ai pas pu ajouter l'événement click. L'élément approprié a été sélectionné cependant.

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

it- obtenu un bon 8 heures plus tard solide.

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>"; 

J'utilise jQuery's Validator pour vérifier la valeur en $ (« # hoursBx ») (une zone de texte dans la ligne actuelle).

Ajout des travaux onClick.

Answer 2

tombant sous le coup « meilleure façon » catégorie, JQuery vous permet d'utiliser un each loop au lieu de créer les boucles for manuellement.

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

Answer 3

La façon dont je l'aurais fait, est dans votre premier exemple - au lieu d'utiliser l'API jQuery pour addOption, utilisez l'API DOM, comme ceci:

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

Puis, après la boucle vous peut simplement utiliser:

taskList.selectedIndex = taskIndex; 

pour que la liste de sélection soit positionnée sur la sélection par défaut requise.

Je n'ai pas beaucoup utilisé jQuery, mais je pense que c'est une bonne idée de ne pas négliger l'API DOM - ce n'est souvent pas aussi pratique que les raccourcis offerts par jQuery et autres bibliothèques. au lieu du DOM.

Answer 4

Vous pouvez définir l'index sélectionné comme ceci:

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