Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Dropdown List with Array Values using JavaScript
Overview
To attain the options in the Dropdown list without disturbing the frontend of the web page can be with the help of array. As in the array we can store as many numbers of the option or values. So without directly putting those values in the HTML part of the code in the select tag we can render them from an array which makes it easy to add more value without disturbing the User Interface (UI) of the page.
Approach
This is a very simple technique, by using this technique we can easily render the options value to our list. As by using an array we can store all the value of String type in a single variable which will reduce the space complexity. We also have many functions such as “for”, “foreach”, “map()” by using these we can iterate through arrays and can render the values.
Syntax
The syntax to create a dropdown-list is −
<select name="" id=""> <option value=""></option> <option value=""></option> </select>
Algorithm
Step 1 − Create a HTML code template. To make a dropdown list in HTML we use the select tag to create a dropdown and to create the lists we use the option tag.
<select> <option></option> <option></option> </select>
Step 2 − Initialize an array with the options as element in it and also make an empty String type variable.
var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];
Step 3 − Now use the map method of an array which will map the value from the array to the option list of the dropdown. Use the concatenation technique to concatenate the options to the dropdown list.
arr.map((op,i)=>{ options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>` })
Step 4 − Now the options variable contains the list of the options from an array. Display the rendered value from an array to the dropdown as a list.
document.getElementById("arrayDropdown").innerHTML=options;
Step 5 − All the rendered options will be shown in the dropdown list and are ready to use.
Example
In this example we rendered the value of option from an array. Using the map() function we had iterated the array with the option tag and concatenated with a String type variable. From which we had displayed the output to the select tag by using innerHTML() method.
<html>
<head>
<title>Create a dropdown with array rendered option</title>
</head>
<body>
<h2>Dropdown list with array rendered options</h2>
<select id="arrayDropdown" style="outline:none;padding: 0.4rem;border-radius: 5px; border: none; box-shadow: 0 0 10px rgb(202, 202, 202);margin: 0.8rem;"></select>
<script>
var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];
var options="";
arr.map((op,i)=>{
options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
})
document.getElementById("arrayDropdown").innerHTML=options;
</script>
</body>
</html>
The below image shows the output of the above example. This was just to tell about how we can render the array to the HTML as a list of options. So if you want to make this more interactive, we can use the bootstrap component which makes the styling more beautiful.
Conclusion
This method is the best method to render the values of the option of dropdown list. The main advantage of this is that it is dynamic in nature which makes it easy to manipulate an array which means we can easily update-add-remove the options of the from an array. As we have made an array of an options list so it strictly follows Don’t Repeat Yourself (D-R-Y). It works as a component which can be rendered anywhere on the webpage, just by developing some of the User-Interface (UI).
6K+ Views
