Comment créer une liste déroulante dynamique SELECT dans JavaSciprt/jQuery?

Question

Je veux afficher tous les noms de département dans la table de département dans une zone de liste déroulante. J'ai une fonction qui récupère tout le nom du département. Comment puis-je créer dynamiquement une zone de liste déroulante en cours d'exécution, en utilisant javaScript ou jQuery.

HTML CODE

 <select id="searchDepartments"> 
    </select> <input type="button" value="Search" onClick="search();" /> 

fonction JavaScript

function getDepartments(){ 
EmployeeManagement.getDeptList(function(deptList/*contains n-(dept.id, dept.name)*/{ 
    for(i = 0; i<deptList.length; i++){ 

Comment puis-je capable d'écrire un code qui génère des options (ajoute) à la liste?

Answer 1

Le processus est de créer un noeud option pour chaque élément dans la liste, et l'ajouter en tant qu'enfant de l'élément select.

En javascript plaine:

var sel = document.getElementById('searchDepartments'); 
var opt = null; 

for(i = 0; i<deptList.length; i++) { 

    opt = document.createElement('option'); 
    opt.value = deptList[i].id; 
    opt.innerHTML = deptList[i].name; 
    sel.appendChild(opt); 
} 

Answer 2

Il y a un plugin qui fait déjà cela, vous pouvez vouloir le vérifier. Un autre avantage de ce plugin, est qu'il a construit autocomplete.

Une zone de liste déroulante ou une zone de sélection dans laquelle vous pouvez saisir du texte pour affiner sur le jeu de résultats visibles. Ce code est une compilation du plugin Autocomplete JQuery ainsi que d'autres plugins JQuery , et est toujours au stade de développement alpha .

Answer 3

Un script JavaScript clair et simple regarderait comme suit:

function AddOption(comboBoxID, displayText, displayValue) 
{ 
    var optionItem = document.createElement("option"); 

    optionItem.text = displayText; 
    optionItem.value = displayValue; 

    document.getElementById(comboBoxID).options.add(optionItem); 
} 

Answer 4

Vous pouvez utiliser la fonction générique suivante:

function addOption(text,value,cmbId) { 
    var newOption = new Option(text, value); 
    var lst = document.getElementById(cmbId); 
    if (lst) lst.options[lst.options.length] = newOption; 
} 

Answer 5

Vous pouvez créer une nouvelle option datalist en html5:

<input type="text" class="form-control" id="your_id" list="your_list" 
placeholder="Status"/> 
<datalist id="your_list"> 
</datalist> 

et le remplir avec une fonction .append jquery:

for(var i=0, len=resultado.response['id'].length; i<len; i++) 
{ 
    list += '<option value="' +resultado.response['data'][i]+" ("+resultado.response['id'][i]+") "+ '"></option>'; 
} 
dataList.html(list);