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.

Answer 1

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/