Dynamically add drop down list
Question
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 option of the drop down would be coming from my SQL database .
3 answers
solution1
3 2014-08-05 07:21:57
Replace 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);
solution2
1 2014-08-05 07:43:41
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>
solution3
-1 2021-02-25 13:14:58
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.