CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LordBingShipley
LordBingShipley

Reputation: 135

hide and display elements using a dropdown menu

I was wondering if its possible to hide and display different elements by using a dropdown menu. Currently i have this code for my menu:

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

and this for my 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>

and this is the area that needs to change:

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

theres 2 more divs just like that except with different Option numbers but for some reason it wont show the rest of my code past the closing div tag. Im having trouble because that code works, except it only works for the top option. so if theres 3 options, they start off as all invisible the way i wanted but when i pick an option from the menu, it wont display them. it will only display the third option and not the other 2. if theres 2 options it will only display the second option and not the first, even if i pick the first one. This is my first time asking on here so im sorry if i wasnt clear

Upvotes: 0

Views: 117

Answers (2)

Mukesh Kalgude
Mukesh Kalgude

Reputation: 4844

Dropdown box should be call 3 time events.Which you are created, so it last function call every time.You can change like this.

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

Upvotes: 1

Sam R
Sam R

Reputation: 702

You are replacing the function each time you redefine it. It will only execute the value == "2" version.

At the least, you need to put all of the conditions inside a single copy of the function.

Upvotes: 0

Related Questions