点击下拉选项时目标Div不显示？前端代码故障排查求助

问题根源 #

• showDiv函数逻辑完全偏离需求：你写的showDiv仅实现了显示Apple选项，完全没完成「显示隐藏Div、填充选中内容、隐藏下拉菜单」的核心功能。
• 未定义关键变量/函数：代码里用到的selectedFruit、toggleDropdown根本没声明，点击选项时会直接触发报错。
• DOM结构不完整：最外层.dropdown容器标签没闭合，导致布局和事件绑定异常。
• 点击事件覆盖不全：仅Apple绑定了onclick，Banana和Orange没有点击响应逻辑。

修复步骤及完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Dropdown Menu with Search</title>
    <style>
        /* Basic styling for the dropdown */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-label {
            font-weight: bold;
            padding: 10px;
            cursor: pointer; /* 增加鼠标指针提示 */
        }

        .dropdown-content {
            display: block; /* Display the content by default */
            position: absolute;
            background-color: #fff;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            min-width: 200px;
            border-radius: 5px; /* Rounded corners for the dropdown content */
        }

        .dropdown-content a {
            display: none;
            padding: 10px;
            text-decoration: none;
            color: #333;
            cursor: pointer; /* 增加鼠标指针提示 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* Styling for the search input */
        .search-input-container {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

        .search-input {
            width: 100%;
            padding: 8px;
            border: none;
            border-radius: 20px; /* Rounded corners for the search input */
            outline: none;
        }

           /* Style for the div that appears */
           .hidden-div {
            display: none;
            margin-top: 10px;
            padding: 20px;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <!-- 补全闭合的.dropdown容器 -->
    <div class="dropdown">
        <div class="dropdown-label">Fruit</div>
        <div class="dropdown-content">
            <div class="search-input-container">
                <input type="text" class="search-input" placeholder="Search...">
            </div>
            <div id="dropdown">
                <!-- 给所有选项绑定showDiv，并传递选中文本 -->
                <a href="javascript:void(0)" id="a" onclick="showDiv('Apple')">Apple</a> 
                <a href="javascript:void(0)" id="b" onclick="showDiv('Banana')">Banana</a>
                <a href="javascript:void(0)" id="c" onclick="showDiv('Orange')">Orange</a>
            </div>
        </div>
    </div>

    <div class="hidden-div" id="myDiv">
        <p>You selected: <span id="selectedOption"></span></p>
    </div>

    <script>
        // JavaScript to show/hide dropdown content
        const dropdownLabel = document.querySelector('.dropdown-label');
        const dropdownContent = document.querySelector('.dropdown-content');

        dropdownLabel.addEventListener('click', function () {
            dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
        });

        // JavaScript for filtering items
        const searchInput = document.querySelector('.search-input');
        const links = document.querySelectorAll('.dropdown-content a');

        searchInput.addEventListener('input', function () {
            const searchText = searchInput.value.toLowerCase();
            
            links.forEach(function (link) {
                const itemText = link.textContent.toLowerCase();
                if (itemText.includes(searchText)) {
                    link.style.display = 'block';
                } else {
                    link.style.display = 'none';
                }
            });
        });

        // 修正showDiv函数，实现核心需求
        function showDiv(selectedText) {
            // 显示隐藏的Div
            document.getElementById('myDiv').style.display = 'block';
            // 填充选中内容到文本框
            document.getElementById('selectedOption').textContent = selectedText;
            // 隐藏下拉菜单
            dropdownContent.style.display = 'none';
        }
    </script>
</body>
</html>

额外优化说明 #

• 把<a>标签的href="#"改成href="javascript:void(0)"，避免点击后页面跳转
• 给可点击元素添加cursor: pointer样式，提升用户交互体验
• 移除冗余的事件监听，统一用onclick绑定逻辑，代码更简洁

内容的提问来源于stack exchange，提问作者user13948791