JavaScript

How to Create a Dropdown List Using JavaScript?

HTML and CSS are used to create stunning web pages, but when JavaScript is used in combination, the result is absolutely phenomenal. One really cool thing about a webpage is its drop-down lists. Now, there are many frameworks available on the internet that allow the user to use pre-built drop-down lists but knowing the fundamentals are important. This article will demonstrate how to create a basic drop-down list with the help of HTML, CSS, and JavaScript.

Step 1: Set up the HTML Document

Start by creating an HTML document and putting the following lines inside the HTML file:

<center>

<div id="ddSection">

<button onclick="ButtonClicked()" id="button">Choose Car Make</button>

<center>

<div id="carMakes">

<a href="#"> Porsche </a>

<a href="#"> Mercedes </a>

<a href="#"> BMW </a>

<a href="#"> Audi </a>

<a href="#"> Bugatti </a>

</div>

</center>

</div>

</center>

Let’s explain what is going on over here:

  • A parent <div> is created with the id = “ddSection”, Later this div will be used to align its child elements in-line with it
  • A button is created which calls the ButtonClicked() method upon click. This button will be used to show the drop-down list.
  • After that, another div is created with the id “carMakes”, which is going to store a bunch of options inside it. This div will work like a container for the <a> tags placed inside it.

Running the HTML document gives the following output to the browser:

As it is visible in the output, the items of the drop-down list are not in the correct spot. They should be:

  • Hidden until the button is clicked
  • Vertically inline with the button since it is a “Drop-down” list

So, let’s fix that in the next step

Step 2: Fixing the Drop-down List’s Items with CSS

To start, set the parent div’s (whose id is ddSection) display property to “inline-block”, also set its position to “relative”:

#ddSection {

position: relative;

display: inline-block;

}

After that, add some styling to the button:

#button {

padding: 10px 30px;

font-size: 15px;

}

Style the container for the list items and set its display property to “none” so that it is hidden in the start:

#carMakes {

display: none;

min-width: 185px;

}

And finally, style the list items, and set their display property to “none”, so they are also hidden in the start:

#carMakes a {

display: block;

background-color: rgb(181, 196, 196);

padding: 20px;

color: black;

text-decoration: none;

}

The complete CSS code for this demonstration:

#ddSection {

position: relative;

display: inline-block;

}

#button {

padding: 10px 30px;

font-size: 15px;

}

#carMakes {

display: none;

min-width: 185px;

}

#carMakes a {

display: block;

background-color: rgb(181, 196, 196);

padding: 20px;

color: black;

text-decoration: none;

}

Running the HTML now will create the following output on the browser:

The list items are now hidden, all there is left to do is to toggle their display property upon button press. Let’s do that in the next step.

Step 3: Toggling Display Property With JavaScript

In the JavaScript file, start by creating the function ButtonClicked(), which will be executed upon the press of the button:

function ButtonClicked() {

// Upcoming lines of code belong here

}

In this function, get the reference of the div with id “carMakes” which is the container for the list items like:

var container = document.getElementById("carMakes");

After this, use the container variable to show and hide the drop down list with the help of if-else statement and the display property of the careMakes div:

if (container.style.display === "none") {
          container.style.display = "block";
        } else {
          container.style.display = "none";
        }

The complete JavaScript code for this demonstration is as:

function ButtonClicked() {
var container = document.getElementById("carMakes");
if (container.style.display === "none") {
          container.style.display = "block";
        } else {
          container.style.display = "none";
        }
}

After this, simply run the HTML file on a browser and click on the button to show and hide the drop-down list:

And the drop-down list is working perfectly fine.

Conclusion

Drop-down list can be created with a combination of HTML, CSS, and JavaScript. Drop-down lists add to the aesthetics of the web page. To create a drop-down list, create the required elements in the HTML file. In the CSS file, style the elements and hide them using their display property. In the JavaScript file, toggle the display property upon button click. In this article, the creation of a drop-down list was explained step by step.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.