如何在 JavaScript/jQuery 中创建动态 SELECT 下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3600593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a dynamic SELECT drop-down list in JavaScript/jQuery?
提问by
I want to display the all the department names in the Dept Table in a combo box. I have a function which fetches all the Dept name. How can I dynamically create combo box in runtime, using javaScript or jQuery.
我想在组合框中显示部门表中的所有部门名称。我有一个函数可以获取所有部门名称。如何使用 javaScript 或 jQuery 在运行时动态创建组合框。
HTML CODE
HTML代码
<select id="searchDepartments">
</select> <input type="button" value="Search" onClick="search();" />
JavaScript function
JavaScript 函数
function getDepartments(){
EmployeeManagement.getDeptList(function(deptList/*contains n-(dept.id, dept.name)*/{
for(i = 0; i<deptList.length; i++){
How can I able to write a code that generates(adds) options to the list?
我怎样才能编写生成（添加）选项到列表的代码？
采纳答案by lincolnk
The process is to create an optionnode for each item in the list, and add it as a child of the selectelement.
该过程是为option列表中的每个项目创建一个节点，并将其添加为select元素的子元素。
In plain javascript:
在普通的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);
}
回答by Zafer
You can use the following generic function:
您可以使用以下通用函数：
function addOption(text,value,cmbId) {
var newOption = new Option(text, value);
var lst = document.getElementById(cmbId);
if (lst) lst.options[lst.options.length] = newOption;
}
回答by Robert Greiner
There's a pluginthat already does this, you may want to check it out. Another benefit of this plugin, is that it has autocomplete built in.
有一个插件已经可以做到这一点，您可能想查看一下。这个插件的另一个好处是它内置了自动完成功能。
A drop-down combo box, or a select box into which you can type text to narrow down the visible result set. This code is a compilation of the JQuery Autocomplete plugin as well as other JQuery plugins, and is still in the alpha stage of development.
下拉组合框或选择框，您可以在其中键入文本以缩小可见结果集的范围。这段代码是JQuery Autocomplete 插件以及其他JQuery 插件的编译，目前仍处于alpha 开发阶段。
回答by Kyle Rozendo
A plain and simple JavaScript script would look as follows:
一个简单的 JavaScript 脚本如下所示：
function AddOption(comboBoxID, displayText, displayValue)
{
var optionItem = document.createElement("option");
optionItem.text = displayText;
optionItem.value = displayValue;
document.getElementById(comboBoxID).options.add(optionItem);
}
回答by CarlosZ
You can create a datalist new option in html5:
您可以在 html5 中创建一个 datalist 新选项：
<input type="text" class="form-control" id="your_id" list="your_list"
placeholder="Status"/>
<datalist id="your_list">
</datalist>
and fill it with a jquery .append function:
并用 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);
