How to Create a Dropdown List with Array Values using JavaScript? Last Updated : 02 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 are the methods to create a dropdown list with array values:Table of ContentUsing Pure JavaScriptUsing jQueryUsing Pure JavaScriptUtilizes 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;"> <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:OutputUsing jQueryEmploys 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;"> <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:Output Comment More infoAdvertise with us Next Article How to Create a Dropdown List with Array Values using JavaScript? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies HTML CSS CSS-Misc HTML-Misc HTML-Questions CSS-Questions +4 More Similar Reads How To Create A Cascading Dropdown List Using JavaScript? The Cascading dropdown lists are used to display options in a secondary dropdown based on the selection made in a primary dropdown. This is useful in forms where users need to select categories or locations in the hierarchical manner. For example: selecting a country might reveal states or provinces 3 min read Create an array filled with given values Using JavaScript In JavaScript, an array is a collection of values that can be stored and accessed in a single variable. Each value in an array is called an element, and elements can be of any data type, such as numbers, strings, or other objects. Arrays are indexed, meaning that each element has a numerical positio 5 min read JavaScript - How to Create Dropdown List? The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.Creating Dr 3 min read How to Get Selected Value in Dropdown List using JavaScript? A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript.Basic HTML Structure for 2 min read How to create HTML List from JavaScript Array? Creating an HTML list from a JavaScript array allows you to dynamically generate <ul> (unordered) or <ol> (ordered) lists and fill them with data directly from your array. This is useful when you want to display array data in a structured way on your webpage. In this guide, weâll go thro 3 min read How to Populate Dropdown List with Array Values in PHP? We will create an array, and then populate the array elements to the dropdown list in PHP. It is a common task when you want to provide users with a selection of options. There are three approaches to achieve this, including using a foreach loop, array_map() function, and implode() function. Here, w 2 min read How to get Values from HTML Input Array using JavaScript? This problem can be solved by using input tags having the same "name" attribute value that can group multiple values stored under one name which could later be accessed by using that name. Syntaxlet input = document.getElementsByName('array[]');What is an Input Array in HTML?An "input array" in HTML 2 min read How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil 2 min read How to create a form within dropdown menu using Bootstrap ? A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use 3 min read How to create multiple dropdown options as a tag in ReactJS? Choosing multiple options and creating your own options from the dropdown means allowing the user to choose more than one option from the dropdown and add his own options. Material UI for React has this component available for us and it is very easy to integrate. We can choose multiple options and c 2 min read Like