Как создать динамический раскрывающийся список SELECT в JavaSciprt/jQuery?

Question

Я хочу отобразить все имена отделов в таблице отделов в поле со списком. У меня есть функция, которая извлекает все имя Dept. Как я могу динамически создавать поле со списком во время выполнения, используя javaScript или jQuery.

HTML КОД

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

JavaScript функция

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

Как я смог написать код, который генерирует (добавляет) опции в списке?

Answer 1

Процесс заключается в создании option узла для каждого элемента в списке, и добавить его в качестве дочернего select элемента.

В простом JavaScript:

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

Существует plugin, который уже делает это, вы можете проверить его. Еще одно преимущество этого плагина является то, что он автозаполнения встроенный.

Комбинированное выпадающий или выберите поле , в которую можно ввести текст, чтобы сузить вниз видимого результирующего набора. Этот код является сборником плагина JQuery Autocomplete, а также плагинов JQuery и по-прежнему находится в стадии разработки .

Answer 3

Простой и простой сценарий JavaScript будет выглядеть следующим образом:

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

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

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

Answer 4

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

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

Вы можете создать DataList новую опцию в html5:

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

и заполнить его с функцией jquery .append:

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