【问题标题】：Dynamically add drop down list动态添加下拉列表
【发布时间】：2014-09-27 18:40:38
【问题描述】：
我可以像这样动态添加文本框：
<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>
JS Fiddle
我该怎么做？我想动态生成一个 下拉菜单 (<select>)，而不是 文本框。并且下拉列表的 option 将来自我的 SQL 数据库。
【问题讨论】：
标签：
javascript
php
html
sql
dynamically-generated
【解决方案1】：
将createElement('input') 替换为createElement('select')，然后以同样的方式创建额外的option 元素：var opt1 = document.createElement('option') 和设置属性（value 去服务器和text 用户看到，通常）在每个元素上。然后将每个 option 对象附加到您的 select 对象中，并将 select 对象附加到 DOM 中，就像您现在对 input 对象所做的那样。
这是一个使用动物数组的示例，并将第一个字母作为值发送到服务器：
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);
【解决方案2】：
您好，请尝试此代码。
<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>
【解决方案3】：
此链接会有所帮助。
How to dynamically create a drop-down list with JavaScript and jQuery你也可以这样试试。
function addItemToList(){
//create label for the dropdown
var label = document.createElement("label");
label.innerHTML = "Select an Item: "
//dropdown values
var valuerArray = ["V1", "V2", "V3", "V4"];
var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];
//create dropdown
var select = document.createElement("select");
select.name = "dropdownName";
select.id = "dropdownId"
//dropdown items
for (var i = 0; i < valuerArray.length; i++) {
var option = document.createElement("option");
option.value = valuerArray[i];
option.text = textArray[i];
select.appendChild(option);
}
//add label and dropdown to HTML containers
document.getElementById("labelContainer").appendChild(label);
document.getElementById("itemContainer").appendChild(select);
}
<HTML>
<body>
<table>
<tr>
<td><div id="labelContainer"></div></td>
<td><div id="itemContainer"></div></td>
<td><input name='add' type='button' id='add' value='Add Item' onclick='addItemToList()' /></div></td>
</tr>
</table>
</body>
</html>