JavaScript - How to Create Dropdown List?

Last Updated : 26 Nov, 2024

The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.

Creating Dropdown List using JavaScript

We will use JavaScript to toggle the list visibility dynamically. If the display property is none then change it to block and vice-versa.

Syntax

const element = document.getElementById("dropdown_list");

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

Example: Creating a basic dropdown menu containing few items using JavaScript that toggles on click.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Dropdown List Using JavaScript</title>
    <style>
        .dropdown {
            width: 160px;
            padding: 10px;
        }
        .dropdown-button {
            padding: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: #f9f9f9;
        }
        /* Hide the Menu Items*/
        .menu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            min-width: 160px;
        }
        .menu-item {
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <div class="dropdown">
        <div class="dropdown-button" id="dropdownButton">Menu</div>

        <!-- Dropdown list items-->
        <div class="menu" id="optionsMenu">
            <div class="menu-item">Item 1</div>
            <div class="menu-item">Item 2</div>
            <div class="menu-item">Item 3</div>
        </div>
    </div>

    <script>
        // JavaScript for dropdown functionality
        const dropdownButton = document.getElementById("dropdownButton");
        const optionsMenu = document.getElementById("optionsMenu");
        const dropdownItems = document.querySelectorAll(".menu-item");

        // Toggle dropdown menu visibility
        dropdownButton.addEventListener("click", () => {
            if (optionsMenu.style.display === "block") {
                optionsMenu.style.display = "none";
            } else {
                optionsMenu.style.display = "block";
            }
        });

        // Update the dropdown text and close the menu on item click
        dropdownItems.forEach((item) => {
            item.addEventListener("click", () => {
                optionsMenu.style.display = "none";
            });
        });

        // Close dropdown menu if clicked outside
        document.addEventListener("click", (event) => {
            if (!event.target.closest(".dropdown")) {
                optionsMenu.style.display = "none";
            }
        });
    </script>
</body>
  
</html>

Output

Example 2: Creating a dropdown list that toggles the list visibility using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdown list using javascript</title>
    <style>
      
        .dropdown_button {
            background-color: #0979ad;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            width: 200px;
            font-family: montserrat;
            border: 1px solid #ffffff;
        }

        .courses {
            display: none; /* Initially Hide the Dropdown List*/
            position: absolute;
            background-color: #f1f1f1;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .courses li {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            list-style: none;
            background-color: rgb(47, 47, 47);
            font-family: montserrat;
            border: 1px solid white;
        }

        .courses li a {
            text-decoration: none;
            color: white;
            display: block;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="dropdown_list">
            <button class="dropdown_button" 
                onclick="toggleList()">
                Select course
            </button>

            <div id="courses_container" class="courses">
                <li><a href="">MERN Stack</a></li>
                <li><a href="">ReactJS Developer</a></li>
                <li><a href="">Backened Developer</a></li>
                <li><a href="">Machine Learning</a></li>
                <li><a href="">Data warehousing</a></li>
            </div>
        </div>
    </div>

    <script>
        function toggleList() {
          	// Access the List
            const courses = document.getElementById("courses_container");
			
          	// Check the visibility
            if (courses.style.display == "block") {
                courses.style.display = "none"; // Hide the list
            } else {
                courses.style.display = "block"; // Display the list
            }
        }
      
      	// Hide the list on click outside the dropdown list
        window.onclick = function (event) {
            if (!event.target.matches('.dropdown_button')) {
                document.getElementById('courses_container')
                    .style.display = "none";
            }
        }    
    </script>
</body>
</html>