How to create a dropdown list containing array values ​​using JavaScript

Overview

To get the options in the drop-down list without interfering with the front-end of the web page, you can use an array. As in an array, we can store any number of options or values. So instead of putting these values ​​directly into the HTML portion of the code in the select tag, we can render them from an array, making it easy to add more values ​​without disturbing the user interface (UI) of the page.

method

This is a very simple technique and by using this technique we can easily render option values ​​into our list. By using an array we can store all the String type values ​​in a single variable which will reduce the space complexity. We also have many functions like "for", "foreach", "map()", by using these functions we can iterate the array and can Render value.

grammar

The syntax for creating a drop-down list is -

<select name="" id="">
   <option value=""></option>
   <option value=""></option>
</select>

algorithm

Step 1 − Create an HTML code template. To create a drop-down list in HTML, we use the select tag to create the drop-down list and the option tag to create the list.

<select>
   <option></option>
   <option></option>
</select>

Step 2 − Initialize an array containing options as elements and create an empty String type variable.

var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];

Step 3 − Now use the mapping method of the array, which maps the values ​​in the array to the option list of the drop-down list. Use the concatenation technique to connect options to drop-down lists.

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 options in the array. Displays rendered values ​​from an array into a dropdown list.

document.getElementById("arrayDropdown").innerHTML=options;

Step 5−All rendered options will appear in the drop-down list and be available for use.

Example

In this example, we render the value of the option from an array. Using the map() function, we iterated over the array using option markers and concatenated it with a String type variable. We use the innerHTML() method to display the output to the select tag.

   


   
Dropdown list with array rendered options
   
   <script>
      var arr = [&quot;Courses here&quot;,&quot;Frontend Training&quot;,&quot;Backend Training&quot;,&quot;Java Training&quot;,&quot;Ethical Hacking&quot;];
      var options="";
      arr.map((op,i)=>{
         options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
      })
      document.getElementById(&quot;arrayDropdown&quot;).innerHTML=options;
   </script>

The image below shows the output of the above example. This is just to show us how to render an array into HTML as a list of options. So if you want to make it more interactive, we can use the bootstrap component, which makes the styling more beautiful.

in conclusion

This method is the best way to present drop-down list option values. The main advantage of this is that it is dynamic in nature, which makes it easy to manipulate the array, meaning we can easily update, add or remove options from the array. Since we've made a list of options, it strictly follows Don't Repeat Yourself (D-R-Y). It works as a component and can be rendered anywhere on a web page, requiring only some user interface (UI) development.

The above is the detailed content of How to create a dropdown list containing array values ​​using JavaScript. For more information, please follow other related articles on the PHP Chinese website!