显示/隐藏的div提交

Question

我曾出这90％左右，但似乎无法得到最后的10％：

我有要求用户选择一个位置的形式。在选择时，我希望页面（和请求表单）淡入淡出，而新的div将随定价信息一起褪色。

现在，一切按第一个选定选项（novato）的预期工作，但在列表中的任何其他选项中，页面和请求表单div都淡出，并且新的定价div不可见。

我很难过，而且很确定我只是错过了一些愚蠢的东西（作为一个新手）。任何帮助表示赞赏！

申请表：

<form id="locations"> 
<select> 
<option>Choose a location</option> 
<option></option> 
<option id="novato" value="novato">Novato</option> 
<option id="sanleandro" value="sanleandro">San Leandro</option> 
<option id="livermore" value="livermore">Livermore</option> 
<option id="sanjose" value="sanjose">San Jose</option> 
</select> 
<input type="submit" id="submit" value="go"/> 
</form> 

的JS：

> $(function() { 
> $("#locations").submit(function() { 
>  if ($("#novato").attr("selected")) { 
>   $("#pricing_novato").fadeIn("normal"); 
>   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_novato").css({top:"0",left:"50%",margin:"20px 
> 0 0 -"+($("#pricing_novato").width()/
> 2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      }else if($("#sanleandro").attr("selected")) { 
>   $("#pricing_sanleandro").fadeIn("normal"); 
>   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_sanleandro").css({top:"0",left:"50%",margin:"20px 
> 0 0 
> -"+($("#pricing_sanleandro").width()/2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      }else if($("#livermore").attr("selected")) { 
>   $("#pricing_livermore").fadeIn("normal");   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_livermore").css({top:"0",left:"50%",margin:"20px 
> 0 0 
> -"+($("#pricing_livermore").width()/2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      }else if($("#sanjose").attr("selected")) { 
>   $("#pricing_sanjose").fadeIn("normal"); 
>   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_sanjose").css({top:"0",left:"50%",margin:"20px 
> 0 0 -"+($("#pricing_sanjose").width() 
>/2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      } 
    }); 
}); 

的div：

<div id="pricing_novato">content</div> 
<div id="pricing_sanleandro">content</div> 
<div id="pricing_livermore">content</div> 
<div id="pricing_sanjose">content</div> 

Answer 1

的想法值：http://jsfiddle.net/Efb32/6/。

我改变了一些东西，看看代码：增加了一些风格，改变了css(...)变化，从而它适合，加return false提交表单代码，以便它在的jsfiddle并添加#page和#pricing_selector的div是用于代码中。它看起来对于所有4个选项都是一样的。

我想我给出的输出我不明白是什么问题 - 你可以检查jsfiddle上的代码是否按照您的预期逻辑运行？

Answer 2

你试过分配当前选定的选项给一个变量，然后测试而不是？

var selectedLocation = $("select option:selected").val(); 

而且，如果#page是你的容器，就不会这样：容器内包含

$("#page").fadeTo("normal", 0.1); 

淡出一切吗？我只是假设，因为我在你的代码中看不到它。

你也可以尝试把一些控制台记录或干脆提醒您正试图测试给你，我刚刚创建了一个用的jsfiddle代码发生的事情在你的代码