Question

我想在组合框中显示Dept Table中的所有部门名称。我有一个获取所有Dept名称的函数。如何使用javaScript或jQuery在运行时动态创建组合框。

HTML CODE

     <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的汇编自动完成插件以及其他 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

您可以在html5中创建一个datalist新选项：

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

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

5 个答案: