Building a Dynamic Drop-Down Menu using HTML, CSS, and JavaScript

A drop-down menu is an essential element in modern websites and applications. It is used to provide users with multiple options and allow them to select one or more options. In this tutorial, we'll create a dynamic drop-down menu that will be populated with data from an external source and change dynamically based on user interaction.

HTML

First, we'll create the HTML structure of our drop-down menu. We'll use a select element to create the drop-down menu, and option elements to create individual options.

<select id="dropdown">
  <option value="">Select an option</option>
</select>

CSS

Next, we'll style the drop-down menu using CSS. We'll give the select element a width, height, and font-size, and also style the options to make them look better.

select {
  width: 200px;
  height: 35px;
  font-size: 16px;
}

option {
  padding: 10px;
}

JavaScript

Finally, we'll use JavaScript to dynamically populate the drop-down menu with data and add interactivity.

To start, let's create an array of options that we want to show in the drop-down menu:

const options = [
  { value: 1, text: 'Option 1' },
  { value: 2, text: 'Option 2' },
  { value: 3, text: 'Option 3' },
  { value: 4, text: 'Option 4' },
  { value: 5, text: 'Option 5' }
];

Next, we'll use JavaScript to loop through the array and add each option to the drop-down menu:

const dropdown = document.getElementById('dropdown');

options.forEach(option => {
  const opt = document.createElement('option');
  opt.value = option.value;
  opt.innerText = option.text;
  dropdown.appendChild(opt);
});

Now, let's add a change event listener to the drop-down menu that will run a function whenever the user selects an option:

dropdown.addEventListener('change', e => {
  console.log(`Selected option: ${e.target.value}`);
});

That's it! Our dynamic drop-down menu is now complete. You can use this as a starting point for your own projects and customize it further to meet your needs.

Here's the complete code for reference:

<!DOCTYPE html>
<html>
  <head>
    <style>
      select {
        width: 200px;
        height: 35px;
        font-size: 16px;
      }

      option {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <select id="dropdown">
      <option value="">Select an option</option>
    </select>
    <script>
      // array of options
      const options = [
        { value: 1, text: "Option 1" },
        { value: 2, text: "Option 2" },
        { value: 3, text: "Option 3" },
        { value: 4, text: "Option 4" },
        { value: 5, text: "Option 5" },
      ];
      // loop through the array and add each option
      const dropdown = document.getElementById("dropdown");

      options.forEach((option) => {
        const opt = document.createElement("option");
        opt.value = option.value;
        opt.innerText = option.text;
        dropdown.appendChild(opt);
      });
      // add a change event listener to the drop-down
      dropdown.addEventListener("change", (e) => {
        console.log(`Selected option: ${e.target.value}`);
      });
    </script>
  </body>
</html>

Live Preview

By following this tutorial, you learned how to create a dynamic drop-down menu using HTML, CSS, and JavaScript. You started by creating the HTML structure of the drop-down menu, styling it with CSS, and finally adding interactivity and data with JavaScript.

With this knowledge, you can create dynamic drop-down menus with ease and add them to your website or application to provide users with multiple options and enhance their experience.

Next: Building a Sticky Header with HTML, CSS, and JavaScript

/ @kheersagar / Building a Dynamic Drop-Down Menu using HTML, CSS, and JavaScript

Building a Dynamic Drop-Down Menu using HTML, CSS, and JavaScript

HTML

CSS

JavaScript

You may also like

Building a Hamburger Menu with HTML, CSS, and JavaScript

Integrating Google Charts into a website with HTML, CSS, and JavaScript

Designing a custom select dropdown with HTML, CSS, and JavaScript