在表单提交上显示/隐藏 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

我刚刚用你的代码创建了一个 jsfiddle：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);

淡出容器中包含的所有内容？我只是假设因为我在你的代码中看不到它。

您还可以尝试放置一些控制台日志记录或简单地提醒您尝试测试的值，以让您了解代码中发生的情况