Dynamically create a drop-down list with JavaScript/jQuery

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

document.getElementById('generate').onclick = function() {

var values = ["dog", "cat", "parrot", "rabbit"];

var select = document.createElement("select");

select.name = "pets";

select.id = "pets"

for (const val of values)

{

var option = document.createElement("option");

option.value = val;

option.text = val.charAt(0).toUpperCase() + val.slice(1);

select.appendChild(option);

}

var label = document.createElement("label");

label.innerHTML = "Choose your pets: "

label.htmlFor = "pets";

document.getElementById("container").appendChild(label).appendChild(select);

}

HTML

<html>

<body>

<br>

<div>

<button id="generate">Generate</button>

</div>

</body>

</html>

Edit in JSFiddle

2. Using jQuery solution

JS

$(document).ready(function() {

$('#generate').click(function() {

var values = ["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>

<br>

<div>

<button id="generate">Generate</button>

</div>

</body>

</html>

Edit in JSFiddle

Alternatively, you can do like:

JS

$(document).ready(function() {

$('#generate').click(function() {

var values = ["dog", "cat", "parrot", "rabbit"];

var select = $('<select>').prop('id', 'pets')

.prop('name', 'pets');

$(values).each(function() {

select.append($("<option>")

.prop('value', this)

.text(this.charAt(0).toUpperCase() + this.slice(1)));

});

var label = $("<label>").prop('for', 'pets')

.text("Choose your pets: ");

var br = $("<br>");

$('#container').append(label).append(select).append(br);

})

});

HTML

<html>

<body>

<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.

Dynamically create a drop-down list with JavaScript/jQuery

1. Using JavaScript solution

JS

HTML

2. Using jQuery solution

JS

HTML

JS

HTML

Share this: