Как создать динамический выпадающий список SELECT в JavaScript / 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

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

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

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

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

Answer 5

Вы можете создать новую опцию списка данных в 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);