如何使用 JavaScript 创建下拉列表？

当用户访问任何网站时，下拉列表菜单对用户非常有帮助。让用户在使用本网站提供的各种服务时获得更好的体验，无任何后顾之忧。在本文中，我们将使用 HTML、CSS 和最重要的 JavaScript 创建一个下拉列表。

下拉列表基本上是一个按钮，当用户单击它时，它会向下展开并显示其子元素，用户可以根据自己的喜好从中选择任何一个。

方法：在本文中，我们将创建两个下拉列表，第一个是可点击的下拉列表，这意味着您必须单击它才能看到其余的子项，另一个是可悬停的下拉列表，您只需将鼠标悬停在它上面，它就会显示其余的子元素，用户可以从中选择其中之一。

示例：在此下拉列表中，用户必须单击按钮才能打开下拉列表。

HTML

  

    Dropdown list using javascript
  
    
        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;
        }
    

  

    
        
            
                Select course
            
  
            
                Machine learing
                Data science
                Data analysis
                Data mining
                Data warehousing
            
        
    
  
    
        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";
            }
        }    
    

  

输出：