javascript 动态添加下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25133104/
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
Dynamically add drop down list
提问by Logan Wayne
I can dynamically add text boxes like this:
我可以像这样动态添加文本框：
<html>
<body>
<div id='item'></div>
<input name='add' type='button' id='add' value='Add Item'/>
</body>
</html>
<script type="text/javascript">
var item = document.getElementById('item');
var stopper=0;
document.getElementById('add').onclick = function () {
stopper=stopper+1;
var input = document.createElement('input'),
div = document.createElement('div');
input.type = "text";
input.setAttribute("name", "item[]");
input.setAttribute("class", "item");
div.appendChild(input);
//...
item.appendChild(div);
};
</script>
How can I do this? Instead of text box, I want to dynamically generate a drop down(<select>). And the optionof the drop down would be coming from my SQL database.
我怎样才能做到这一点？我想动态生成一个下拉列表（）而不是文本框。和选项的下拉会从我的是未来的SQL数据库。<select>
回答by CBHacking
Replace createElement('input')with createElement('select')and then create additional optionelements the same way: var opt1 = document.createElement('option')and Set the attributes (valuethat goes to the server and textthat the user sees, usually) on each element. Then append each optionobject to your selectobject, and append the selectobject into the DOM as you are doing with your inputobject now.
替换createElement('input')为createElement('select')，然后option以相同的方式创建其他元素：var opt1 = document.createElement('option')并在每个元素上设置属性（value发送到服务器并且text用户通常会看到）。然后将每个option对象附加到您的select对象中，并将该select对象附加到 DOM 中，就像您现在处理input对象一样。
Here's an example using an array of animals, and sending the first letter as the value to the server:
这是一个使用动物数组的示例，并将第一个字母作为值发送到服务器：
var items = ['aardvark', 'bear', 'cat', 'donkey'];
var values = ['a', 'b', 'c', 'd'];
var sel = document.createElement('select');
sel.setAttribute('name', 'item[]');
for (var i = 0; i < 4; i++) {
var opt = document.createElement('option');
opt.setAttribute('text', items[i]);
opt.setAttribute('value', values[i]);
sel.appendChild(opt);
}
// ... from here on, set any other attributes, like classes
// Then and add the select object to the DOM:
item.appendChild(sel);
回答by Noki Flores
Hi please try this code.
嗨，请尝试此代码。
<html>
<body>
<div id='item'></div>
<input name='add' type='button' id='add' value='Add Item'/>
</body>
</html>
<script type="text/javascript">
var item = document.getElementById('item');
var stopper=0;
document.getElementById('add').onclick = function () {
stopper=stopper+1;
var select = document.createElement('select'),
div = document.createElement('div');
select.setAttribute("name", "item[]");
select.setAttribute("class", "item");
//this is just an example. You need to replace this code with ajax that is fetching
//from the Database.. and please use jquery it makes your work easier.
var count = getRandomInt(1, 5);
for(var a=1; a<=count; a++) {
var option = document.createElement('option');
var t = randon_val();
//end
option.setAttribute("value",t);
option.appendChild(document.createTextNode(t));
select.appendChild(option);
}
div.appendChild(select);
item.appendChild(div);
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randon_val()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
</script>
