How to Create a Dropdown List with Array Values using JavaScript ?
In this article, we will see how to add elements to the select element from the JavaScript array. We can also get selected values in the dropdown list using JavaScript. Here we will populate the dropdown list with an array. Below is a description of popular approaches used in JavaScript.
Table of Content
- Using Pure JavaScript
- Using jQuery
Approach 1: Using Pure JavaScript
Utilizes pure JavaScript to dynamically populate a dropdown list with array values. The GFG_Fun()
the function iterates through the array, creating and appending option
elements to the dropdown.
Example: 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.
HTML
<!DOCTYPE html> < html > < head > < title > Populate dropdown list with array values </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > Click on Button to Populate dropdown list with array values </ h2 > < select id = "arr" > < option >Dropdown Items</ option > </ select > < br >< br > < button onclick = "GFG_Fun();" > Click Here </ button > < h2 id = "GFG" style = "color: green;" ></ h2 > < script > let res = document.getElementById('GFG'); let select = document.getElementById("arr"); let elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"]; // Main function function GFG_Fun() { for (let i = 0; i < elmts.length ; i++) { let optn = elmts [i]; let el = document .createElement("option"); el.textContent = optn ; el.value = optn ; select.appendChild(el); } res.innerHTML = "Elements Added" ; } </script> </ body > </ html > |
Output:
Approach 2: Using jQuery
Employs jQuery to dynamically populate a dropdown list with array values. The GFG_Fun()
function leverages jQuery’s $.each
to iterate through the array, creating and appending option
elements to the dropdown.
Example: 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.
HTML
<!DOCTYPE html> < html > < head > < title > Populate dropdown list with array values </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > Click on Button to Populate dropdown list with array values </ h2 > < select id = "arr" > < option >Dropdown Items</ option > </ select > < br >< br > < button onclick = "GFG_Fun();" > Click Here </ button > < h2 id = "GFG" style = "color: green;" ></ h2 > < script > let res = document.getElementById('GFG'); let select = document.getElementById("arr"); let elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"]; // Main function function GFG_Fun() { $.each(elmts, function (i, p) { $('#arr').append($('< option ></ option >') .val(p).html(p)); }); res.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.