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

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

<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>

除了Option编号不同之外，还有2个类似的div，但由于某种原因，它不会显示我的代码的其余部分超过结束div标记。我遇到了麻烦，因为那个代码是有效的，除了它只适用于顶部选项。因此，如果有3个选项，它们一开始都是不可见的，就像我想要的那样，但当我从菜单中选择一个选项时，它不会显示它们。它将只显示第三个选项而不显示另一个2。如果有两个选项，它将只显示第二个选项，而不是第一个选项，即使我选择了第一个。这是我第一次在这里提问，所以如果我没有清除