This post will discuss how to dynamically create a dropdown list in JavaScript and jQuery.
To add a dropdown list dynamically, you would need to create the HTML <select> element, its label and optionally a <br> tag.
In pure JavaScript, you can use the document.createElement() method to programmatically create a dropdown list. Then you can call the Node’s appendChild() method or jQuery’s .append() method to append the dropdown list at the end of a container.
1. Using JavaScript solution
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | document.getElementById('generate'). title= function(){ varvalues= ["dog","cat","parrot","rabbit"]; varselect= document.createElement("select"); select.name="pets"; select.id="pets" for (constval of values) { varoption=document.createElement("option"); option.value=val; option.text= val.charAt(0).toUpperCase()+ val.slice(1); select.appendChild(option); } varlabel=document.createElement("label"); label.innerHTML="Choose your pets: " label.htmlFor="pets"; document.getElementById("container").appendChild(label).appendChild(select); } |
HTML
<html> <body> <div id="container"></div> <br> <div> <button id="generate">Generate</button> </div> </body> </html> |
Edit in JSFiddle
2. Using jQuery solution
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $(document).ready(function(){ $('#generate').click(function() { varvalues= ["dog","cat","parrot","rabbit"]; $('#container') .append( $(document.createElement('label')).prop({ for:'pets' }).html('Choose your pets: ') ) .append( $(document.createElement('select')).prop({ id: 'pets', name:'pets' }) ) for(const val of values){ $('#pets').append($(document.createElement('option')).prop({ value:val, text: val.charAt(0).toUpperCase()+ val.slice(1) })) } }) }); |
HTML
<html> <body> <div id="container"></div> <br> <div> <button id="generate">Generate</button> </div> </body> </html> |
Edit in JSFiddle
Alternatively, you can do like:
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(document).ready(function(){ $('#generate').click(function() { varvalues= ["dog","cat","parrot","rabbit"]; varselect=$('<select>').prop('id','pets') .prop('name','pets'); $(values).each(function(){ select.append($("<option>") .prop('value',this) .text(this.charAt(0).toUpperCase()+ this.slice(1))); }); varlabel=$("<label>").prop('for','pets') .text("Choose your pets: "); varbr =$("<br>"); $('#container').append(label).append(select).append(br); }) }); |
HTML
<html> <body> <div id="container"></div> <br> <div> <button id="generate">Generate</button> </div> </body> </html> |
Edit in JSFiddle
That’s all about dynamically creating a drop-down list in JavaScript and jQuery.
Rate this post
Average rating 4.14/5. Vote count: 70
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Tell us how we can improve this post?
Thanks for reading.
Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and help us grow. Happy coding :)