JavaScript Create a Dropdown List using Array/Object

Nov 28, 2022
Article · 2 min
534 words

Like (0)
Favorite (0)

Hello dev's, today I'll show you how to create a dropdown list using JavaScript array/object. I'll give you two example of an array and with an object from which you can easily create a dropdown list. Let's see the examples

Example 1: Using array

In the first example we'll create a dropdown using array. Let's see the below code

<!DOCTYPE html>
<html>
<head>
	<title>Create Dropdown usign Javascript - shouts.dev</title>
</head>
<body>

<div onclick="createDropdown()">
	<button>Create Dropdown</button>
</div>
<p id="msg"></p>
<select id="select"></select>

<script>
  var msg_area = document.getElementById('msg'); 
  var select = document.getElementById("select"); 
  var elmts = ["HTML", "CSS", "JS", "PHP", "Laravel","VueJs"]; 

  // Main function 
  function createDropdown() { 
       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); 
       } 
       msg_area.innerHTML = "Dropdown Created"; 
  } 
</script>
</body>
</html>

It produce the below output

Example 2: Using object

In the below example we'll create a dropdown using object. Let's see the below code.

<!DOCTYPE html>
<html>
<head>
	<title>Create Dropdown usign Javascript - shouts.dev</title>
</head>
<body>

<div onclick="createDropdown()">
	<button>Create Dropdown</button>
</div>
<p id="msg"></p>
<select id="select"></select>

<script>
  var msg_area = document.getElementById('msg'); 
  var select = document.getElementById("select"); 
  var elmts = [
  {
  	id : 1,
  	title : "HTML"
  },
  {
  	id : 2,
  	title : "CSS"
  },
  {
  	id : 3,
  	title :"JS"
  },
  {
  	id : 4,
  	title :"PHP"
  },
  {
  	id : 5,
  	title :"Laravel"
  },
  {
  	id : 6,
  	title :"VueJs"
  },
 ]; 

  // Main function 
  function createDropdown() { 
  	let length = Object.keys(elmts).length;
   for (var i = 0; i < length; i++) { 
        var optn = elmts[i]; 
        var el = document.createElement("option"); 
        el.textContent = optn.title; 
        el.value = optn.id; 
        select.appendChild(el); 
   } 
   msg_area.innerHTML = "Dropdown Created"; 
  } 
</script>
</body>
</html>

Which will produce the same result which we see in the step1.

That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. 🙂

JavaScript