在表单提交上显示/隐藏div

时间:2010-11-14 22:27:07

标签: jquery forms show-hide

我已经解决了大约90%,但似乎无法获得最后10%:

我有一个要求用户选择位置的表单。在选择时,我希望页面(和请求表单)淡化不透明度,新的div在淡入淡出定价信息。

现在,一切按预期工作的第一个选项(novato),但在列表中的任何其他选项上,页面和请求表格都淡出淡出,新的定价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>

2 个答案:

答案 0 :(得分:0)

您是否尝试将当前选定的选项分配给变量,然后对其进行测试?

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

另外,如果#page是你的容器,则不会这样做:

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

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

您还可以尝试进行一些控制台日志记录,或者只是提醒您要测试的值,以便了解代码中发生的情况

答案 1 :(得分:0)

我刚刚用你的代码创建了一个jsfiddle:http://jsfiddle.net/Efb32/6/

我更改了一些内容,看看代码:添加了一些样式,更改了css(...)更改以使其适合,将return false添加到表单提交代码中,以便它在jsfiddle中工作并添加代码中使用的#page#pricing_selector div。对于所有4个选项,它似乎表现相同。

我想我给出了输出我看不出有什么问题 - 你能检查一下jsfiddle上的代码是否符合你的预期吗?