How do you populate a drop down list in html?

View Discussion

Table of Contents Show

How do you populate a list in HTML?
How do I create a dynamic drop
How do you bind a dropdown in HTML?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

The task is to add elements to the select element from the JavaScript array. We can also get selected value in dropdown list using JavaScript. Here we will populate the dropdown list with an array. Below is the description of popular approaches used in JavaScript.

Example 1: In this example, the length property is used to traverse the elements of the array and on each element create an option element and append this new element to the select element by appendChild() method.

Program:

HTML

<!DOCTYPE html>

<html>

<head>

<title>

Populate dropdown list

with array values

</title>

</head>

<body style="text-align:center;">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<p id="geeks" style=

"font-size:20px; font-weight:bold">

</p>

<select id="arr"></select>

<br><br>

<button onclick="GFG_Fun();">

click here

</button>

<p id="gfg" style="font-size: 26px;

font-weight: bold;color: green;">

</p>

<script>

var up = document.getElementById('geeks');

var down = document.getElementById('gfg');

var select = document.getElementById("arr");

var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];

up.innerHTML = "Click on the button to "

+ "perform the operation"+

".<br>Array - [" + elmts + "]";

// Main function

function GFG_Fun() {

for (var i = 0; i < elmts.length; i++) {

var optn = elmts[i];

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

el.textContent = optn;

el.value = optn;

select.appendChild(el);

}

down.innerHTML = "Elements Added";

}

</script>

</body>

</html>

Output:

Example 2: In this example, the each() method is used to traverse the elements of the array and on each element create an option element and append this new element to the select element by append() method in JQuery.

Program:

HTML

<!DOCTYPE html>

<html>

<head>

<title>

Populate dropdown list

with array values

</title>

<script src=

</script>

</head>

<body style="text-align:center;">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<p id="geeks" style=

"font-size: 20px;font-weight: bold">

</p>

<select id="arr"></select>

<br><br>

<button onclick="GFG_Fun();">

click here

</button>

<p id="gfg" style="font-size: 26px;

font-weight: bold; color: green;">

</p>

<script>

var up = document.getElementById('geeks');

var down = document.getElementById('gfg');

var select = document.getElementById("arr");

var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];

up.innerHTML = "Click on the button to "

+ "perform the operation"+

".<br>Array - [" + elmts + "]";

// Main function

function GFG_Fun() {

$.each(elmts, function(i, p) {

$('#arr').append($('<option></option>')

.val(p).html(p));

});

down.innerHTML = "Elements Added";

}

</script>

</body>

</html>

Output:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How do you populate a list in HTML?

HTML provides <select> tag to create Dropdown List. In fact using <select> tag you can create following types of HTML list controls: Dropdown List (by default) ListBox (by adding size attribute)