admin管理员组文章数量:1336734
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>
JS Fiddle
How can I do this? Instead of text box, I want to dynamically generate a drop down (<select>). And the option of the drop down would be ing from my SQL database.
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>
JS Fiddle
How can I do this? Instead of text box, I want to dynamically generate a drop down (<select>). And the option of the drop down would be ing from my SQL database.
- check this answer stackoverflow./questions/9275972/… – Chathuranga Commented Aug 5, 2014 at 7:15
3 Answers
Reset to default 3Replace createElement('input') with createElement('select') and then create additional option elements the same way: var opt1 = document.createElement('option') and Set the attributes (value that goes to the server and text that the user sees, usually) on each element. Then append each option object to your select object, and append the select object into the DOM as you are doing with your input object now.
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);
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>
This link will be helpful. How to dynamically create a drop-down list with JavaScript and jQuery Also you can try this way.
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>本文标签： javascriptDynamically add drop down listStack Overflow
版权声明：本文标题：javascript - Dynamically add drop down list - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742380631a2464018.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论