JavaScript技术问题：实现选中选项后仅显示对应Div，其余隐藏

嘿，我一眼就发现问题所在啦！你代码里的显示/隐藏逻辑完全写反了，这就是为什么选中的div被隐藏、其余反而显示的原因。

核心错误点 #

在showSelected函数里，当判断到当前循环的div是选中的目标（t === r）时，你设置了dv.style.display = 'none'（隐藏它）；而对于其他div，你设置了dv.style.display = 'block'（显示它们）——这正好和你想要的效果完全相反！

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <script>
        function showSelected(sapna) {
            var t = 'dyndiv' + sapna;
            // 遍历所有以dyndiv开头的div元素，比用数组更灵活
            var divs = document.querySelectorAll('[id^="dyndiv"]');
            for (var i = 0; i < divs.length; i++) {
                var dv = divs[i];
                if (dv.id === t) {
                    dv.style.display = 'block'; // 显示选中的div
                } else {
                    dv.style.display = 'none'; // 隐藏其余div
                }
            }
            return false;
        }
    </script>
</head>
<body>
    <h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>
    <!-- 初始状态只显示第一个div，其余隐藏，体验更合理 -->
    <div id="dyndiv1" style="display:block;">
        <h3>Div1</h3>
        <p>Sweet Lorem Ipsum</p>
    </div>
    <div id="dyndiv2" style="display:none;">
        <h3>Div2</h3>
        <p>Bitter Lorem Ipsum</p>
    </div>
    <div id="dyndiv3" style="display:none;">
        <h3>Div3</h3>
        <p>Salty Lorem Ipsum</p>
    </div>
    <div id="dyndiv4" style="display:none;">
        <h3>Div4</h3>
        <p>Umami Lorem Ipsum</p>
    </div>
</body>
</html>

额外优化说明 #

1. 替换了原有的数组遍历，改用document.querySelectorAll('[id^="dyndiv"]')直接选中所有目标div，后续新增div时无需修改数组，扩展性更强。
2. 调整了初始状态的display值，默认只显示第一个div，其余隐藏，符合用户选择前的预期体验。

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