在单击下拉菜单上运行javascript函数_Javascript替代函数在onclick上运行_如何让javascript函数在回车键上运行，而不是单击？ - 腾讯云开发者社区

在单击下拉菜单上运行javascript函数

基础概念

下拉菜单（Dropdown Menu）是一种常见的用户界面元素，允许用户从预定义的选项列表中选择一个或多个选项。JavaScript 是一种脚本语言，常用于网页交互和动态内容生成。

类型

静态下拉菜单：HTML 原生实现，无 JavaScript 交互。
动态下拉菜单：通过 JavaScript 实现动态显示和隐藏选项。

应用场景

表单选择：如选择国家、城市等。
导航菜单：如网站的主导航或子导航。
数据过滤：根据用户选择过滤显示的数据。

示例代码

以下是一个简单的示例，展示如何在单击下拉菜单时运行 JavaScript 函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Menu Example</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>

<div class="dropdown">
    <button onclick="toggleDropdown()">Select Option</button>
    <div id="dropdownContent" class="dropdown-content">
        <a href="#" onclick="handleOptionClick('Option 1')">Option 1</a>
        <a href="#" onclick="handleOptionClick('Option 2')">Option 2</a>
        <a href="#" onclick="handleOptionClick('Option 3')">Option 3</a>
    </div>
</div>

<script>
    function toggleDropdown() {
        var dropdownContent = document.getElementById("dropdownContent");
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    }

    function handleOptionClick(option) {
        alert("You selected: " + option);
        // 在这里可以添加更多的逻辑，如发送请求、更新页面内容等
    }
</script>

</body>
</html>