jQuery Jumpmenu

Question

I'm pretty stuck with this one.

I wanna create a jump menu which switches div's on and off. But as a jquery beginner i'm stuck with sending a val or something to my script.

See my jsfiddle so far, maybe you also get a good idea what i want.

http://jsfiddle.net/wGs8a/2/

<select name="aantalpersonen" id="jumpMenu">
    <option value="one">Always vissable</option>
    <option value="two">Just when selected</option>
    <option value="three">All three are vissable</option>
</select>


<div id="one">
    I'm always vissable
</div>

<div id="two">
    I'm hidden and show if jumpmenu equals 2 and 3 is still hidden
</div>

<div id="three">
    I'm hidden and show if jumpmenu equals 3, 1 and 2 are also still vissable
</div>

Hope somebody can help me with this one! Thank you already for your time.

http://www.encaffeinated.com/articles/view/creating_a_jumpmenu_in_jquery/ — Hitham S. AlQadheeb, May 29 '12 at 19:11
We are note going to write your JS for you. Search a little on Google, and a tip: use `$(element).change(function (e) {} );` — Hidde, May 29 '12 at 19:16
You don't have to when you don't want and of course i looked on google but i couldn't find a good solution or a start. — Eddyfever, May 29 '12 at 19:40

score 0 · Accepted Answer · answered May 29 '12 at 19:25

Well, this is not exactly what you want, but can get you going.

First, hide the divs in css that you don't want to show right from the start:

#two {display:none}
#three {display:none}

The jQuery code is something like this:

$("#jumpMenu").change(function(){
   var selectedValue = $(this).val();

   $("div").hide(); //hides all divs

   $("#one").show(); //assures one is always visible

   switch( selectedValue ){
       case "one":
           //do nothing
           break;
       case "two":
           $("#two").show();
           break;
       case "three":
           $("#two, #three").show();
           break;
    } 
  });

You can see it live in http://jsfiddle.net/wGs8a/2/

jQuery Jumpmenu

1 Answers1