Question

我想知道是否可以使用下拉菜单隐藏和显示不同的元素。目前我的菜单有以下代码：

<select id="productSel" onChange="OnSelectedIndexChange()">
        <option value="0">Value 0</option>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
</select>

这是我的javascript：

<script>
            function OnSelectedIndexChange() {
                if (document.getElementById('productSel').value == "0"){
                document.getElementById("Option1").style.display = "block";
                document.getElementById("Option2").style.display = "none";
                document.getElementById("Option3").style.display = "none";
                }
            };
        </script>
        <script>
            function OnSelectedIndexChange() {
                if (document.getElementById('productSel').value == "1"){
                document.getElementById("Option1").style.display = "none";
                document.getElementById("Option2").style.display = "block";
                document.getElementById("Option3").style.display = "none";
                }
            };
        </script>
        <script>
            function OnSelectedIndexChange() {
                if (document.getElementById('productSel').value == "2"){
                document.getElementById("Option1").style.display = "none";
                document.getElementById("Option2").style.display = "none";
                document.getElementById("Option3").style.display = "block";
                }
            };
        </script>

这是需要改变的领域：

<div id="Option1" style="display:none">
<p>Option1</p>
<p>Line 2</p>

除了具有不同的选项号之外，还有2个div就像那样，但由于某种原因它不会显示我的其余代码超过结束div标签。我遇到麻烦，因为该代码有效，但它仅适用于顶级选项。因此，如果有3个选项，它们会以我想要的方式开始，但是当我从菜单中选择一个选项时，它不会显示它们。它只显示第三个选项，而不显示其他选项2.如果有2个选项，它将只显示第二个选项而不是第一个选项，即使我选择第一个选项。这是我第一次在这里问，所以我很抱歉，如果我不清楚

Answer 1

下拉框应该调用3次事件。你创建了什么，所以每次都进行最后一次函数调用。你可以这样改变。

<script>
            function OnSelectedIndexChange() {
                if (document.getElementById('productSel').value == "0"){
                document.getElementById("Option1").style.display = "block";
                document.getElementById("Option2").style.display = "none";
                document.getElementById("Option3").style.display = "none";
                }

                else if (document.getElementById('productSel').value == "1"){
                document.getElementById("Option1").style.display = "none";
                document.getElementById("Option2").style.display = "block";
                document.getElementById("Option3").style.display = "none";
                }

                else if (document.getElementById('productSel').value == "2"){
                document.getElementById("Option1").style.display = "none";
                document.getElementById("Option2").style.display = "none";
                document.getElementById("Option3").style.display = "block";
                }
            };
        </script>

Answer 2

每次重新定义时都会更换该功能。它只会执行value == "2"版本。

至少，您需要将所有条件放在函数的单个副本中。

使用下拉菜单隐藏和显示元素

2 个答案: