hide and display elements using a dropdown menu

Question

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

Why three separate OnSelectedIndexChange() , it cud have been merged into one ... — Dimag Kharab
– Dimag Kharab, Commented Jul 3, 2015 at 4:15
i had tried several times but i messed it up each time. im new to javascript so i have a lot to learn — LordBingShipley
– LordBingShipley, Commented Jul 3, 2015 at 4:26

Mukesh Kalgude · Accepted Answer · 2015-07-03 04:19:37Z

1

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>

answered Jul 3, 2015 at 4:19

Mukesh Kalgude

4,8542 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LordBingShipley Over a year ago

thank you! that worked perfectly! im very new to JS so i still have a lot to learn. i actually tried what you showed but i added an extra } to the end of each else if statement so that must have messed it up

LordBingShipley Over a year ago

this is my first time using this site, did i mark it? i pressed the big arrow

Sam R · Accepted Answer · 2015-07-03 04:15:59Z

0

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.

answered Jul 3, 2015 at 4:15

Sam R

7023 silver badges11 bronze badges

Collectives™ on Stack Overflow

hide and display elements using a dropdown menu

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related