How to create dropdown list using JavaScript ?

Last Updated : 08 May, 2023

In this article, we are going to learn how to create a dropdown list using javascript, The dropdown list menu is very helpful for users when they visit any website. It makes a better experience for the user to use all kinds of services provided by the website without any hassle. In this article, we are going to create a dropdown list using HTML, CSS, and most important JavaScript.

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.

Approach: In this article, we will create two dropdown lists, the first one will be a clickable dropdown list, which means that you have to click on that to see the rest of the sub-items, and the other one will be a hoverable dropdown list, you just have to hover your mouse over it and it will show the rest of the sub-element from which user can select one of them.

Example: In this dropdown list, the user will have to click on the button to open the dropdown list.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdown list using javascript</title>
 
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
        }
 
        .main {
            height: 400px;
            padding: 10px;
        }
 
        .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;
            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;
        }
 
        .courses li:hover {
            background-color: #0979ad;
            color: white;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="dropdown_list">
            <button class="dropdown_button"
                onclick="show_list()">
                Select course
            </button>
 
            <div id="courses_id" class="courses">
                <li><a href="">Machine learning</a></li>
                <li><a href="">Data science</a></li>
                <li><a href="">Data analysis</a></li>
                <li><a href="">Data mining</a></li>
                <li><a href="">Data warehousing</a></li>
            </div>
        </div>
    </div>
 
    <script>
        function show_list() {
            var courses = document.getElementById("courses_id");
 
            if (courses.style.display == "block") {
                courses.style.display = "none";
            } else {
                courses.style.display = "block";
            }
        }
        window.onclick = function (event) {
            if (!event.target.matches('.dropdown_button')) {
                document.getElementById('courses_id')
                    .style.display = "none";
            }
        }    
    </script>
</body>
</html>