Jquery 在表单提交时显示/隐藏div

我已经计算出了其中的90%，但似乎无法得到最后的10%：

我有一个表单，要求用户选择一个位置。在select上，我希望页面（和请求表单）以不透明度淡入，并在顶部淡入一个新的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>

各分区：

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

内容
内容
内容
内容

您是否尝试将当前选择的选项分配给变量，然后测试该变量

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

此外，如果#page是您的容器，则不会执行以下操作：

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

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

---

您还可以尝试放置一些控制台日志记录，或者简单地警告您要测试的值，让您了解代码中发生了什么

我刚刚用您的代码创建了一个JSFIDLE:

我做了一些更改，看看代码：添加了一些样式，更改了

css（…）

以使其适合，在表单提交代码中添加了

return false

，使其在JSFIDLE中工作，并添加了代码中使用的

#页面

和

#定价选择器

div。所有4个选项的行为似乎都相同

---

我猜我给出了输出，我不知道问题出在哪里-你能检查一下JSFIDLE上的代码是否按照你的预期逻辑运行吗？

非常感谢你的回复！我向转换添加了警报，以确认我的选择是正确的，并且该部分工作正常。（好主意！）定价div实际上位于include文件中，并且设置在页面div之外（但在主体内部），因此该部分也在工作；部分我的测试是这样的吗？：如果（$（“#novato”）=“selectedLocation”）没关系：）你的测试是这样的：如果（selectedLocation=“novato”）等等。。。看来你已经修好了！哇！真奇怪。我知道你做了什么，但还是不知道为什么我的坏了。这里有一个实时链接：我猜这与造型有关。尝试使用相同的

css（…）

行并添加

position:relative

样式-尝试一下，看看这是否是问题所在。我的样式表或include文件中肯定存在一些问题，但您的解决方案有效！非常感谢你！

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