jQuery 跳转菜单答案

【问题标题】：jQuery JumpmenujQuery 跳转菜单
【发布时间】：2012-05-29 19:06:34
【问题描述】：

我很坚持这个。

我想创建一个可以打开和关闭 div 的跳转菜单。但作为一个 jquery 初学者，我一直坚持向我的脚本发送 val 或其他内容。

到目前为止，看看我的 jsfiddle，也许你也知道我想要什么。

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

希望有人能帮我解决这个问题！已经感谢您的宝贵时间了。

【问题讨论】：

encaffeinated.com/articles/view/creating_a_jumpmenu_in_jquery
我们会注意为您编写您的 JS。在谷歌上搜索一下，给个提示：使用$(element).change(function (e) {} );
当你不想要的时候你不必这样做，当然我在谷歌上看过，但我找不到好的解决方案或开始。

标签： jquery jump-list

【解决方案1】：

嗯，这不是你想要的，但可以让你继续前进。

首先，从一开始就隐藏你不想显示的css中的div：

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

jQuery 代码是这样的：

$("#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;
    } 
  });

你可以在http://jsfiddle.net/wGs8a/2/看到它的直播

【讨论】：