基于HTML下拉菜单选择显示对应内容的实现问题

修复页面空白问题 #

你的代码只是HTML片段，缺少完整的文档结构，浏览器无法正确解析才会出现空白页面。需要把代码包裹在标准HTML结构里。

实现条件切换逻辑 #

要实现选择不同选项显示对应内容，需要用JavaScript监听下拉菜单的选择事件，配合CSS控制元素的显示/隐藏。下面是完整的可运行代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单切换示例</title>
    <style>
        /* 默认隐藏两个内容区域 */
        #one, #two {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <select id="options-in-menu">
            <option value="one">One</option>
            <option value="two">Two</option>
        </select>
    </div>

    <div id="selected-option">
        <div id="one">
            <p>x</p>
        </div>
        <div id="two">
            <p>xx</p>
        </div>
    </div>

    <script>
        // 获取下拉菜单元素
        const selectMenu = document.getElementById('options-in-menu');
        // 获取所有内容区域
        const contentAreas = document.querySelectorAll('#selected-option > div');

        // 定义切换显示的函数
        function toggleContent(selectedValue) {
            // 先隐藏所有内容
            contentAreas.forEach(area => {
                area.style.display = 'none';
            });
            // 显示选中值对应的内容
            const targetArea = document.getElementById(selectedValue);
            if (targetArea) {
                targetArea.style.display = 'block';
            }
        }

        // 初始化：默认显示第一个选项的内容
        toggleContent(selectMenu.value);

        // 监听下拉菜单的选择事件
        selectMenu.addEventListener('change', function() {
            toggleContent(this.value);
        });
    </script>
</body>
</html>

关键说明 #

• 用CSS的display: none默认隐藏两个内容块，避免一开始就同时显示
• 通过addEventListener监听下拉菜单的change事件，每次选择触发切换逻辑
• 切换函数先统一隐藏所有内容，再根据选中值显示对应区域，避免多个内容同时显示
• 初始化函数确保页面加载时就显示默认选中项的内容

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