如何在JavaScript / jQuery中创建动态SELECT下拉列表？

Question

我想在组合框中显示部门表中的所有部门名称。 我有一个获取所有部门名称的函数。 如何使用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

已经有一个插件可以执行此操作，您可能需要检查一下。 此插件的另一个好处是，它内置了自动完成功能。

下拉组合框或选择框，您可以在其中键入文本以缩小可见结果集的范围。 该代码是JQuery Autocomplete插件以及其他JQuery插件的编译，仍处于开发的Alpha阶段。

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

您可以在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);