在下拉菜单选择中显示和隐藏表单的一部分（div？）答案

【问题标题】：Showing and Hiding Part of a form (div?) on drop down menu selection在下拉菜单选择中显示和隐藏表单的一部分（div？）
【发布时间】：2011-10-26 16:18:57
【问题描述】：

我有一个问题希望您能提供帮助，我已搜索但无法找到我确切问题的答案。

我有一个下拉（选择）菜单，根据选择需要显示 2 个额外字段我看到的所有其他问题都取决于显示不同字段的不同选择。

<select  id="idhere" name="namehere" title="Mortgage Type">

<option value="First Time Buyer">First Time Buyer</option> 
<option value="Moving Home">Moving Home</option>
<option value="Remortgage">Remortgage</option>
<option value="Buy To Let Purchase">Buy To Let Purchase</option>
<option value="Buy To Let Remortgage">Buy To Let Remortgage</option>
</select>

以下需要显示 2 个额外的表单字段（包含在下面的 div 中）

First Time Buyer
Moving Home
Buy To Let Purchase

这两个都不需要显示额外的字段

Remortgage
Buy To Let Remortgage

最后的额外字段是：

<p>Have You Found A Property</p>
<input  id="foundpropery" type="checkbox" value="0" />
<br />
<br />

<p>Have You Made An Offer</p>
<input  id="foundproperty" type="checkbox" value="0" />

使用javascript？我如何根据选择显示额外的字段

提前感谢您的帮助！

【问题讨论】：

标签： javascript html-select

【解决方案1】：

我认为这可以作为您尝试做的事情的起点，您可以使用 div 的“显示”属性来显示/隐藏它，具体取决于下拉列表中选择的内容：

<html>
<head>
<script type="text/javascript">
function toggle() {
var e = document.getElementById("selectList");
var strMortgageType = e.options[e.selectedIndex].value;
var divToHide1 = document.getElementById("foundproperty");
var divToHide2 = document.getElementById("madeoffer");
if(strMortgageType == "Remortgage" || strMortgageType == "BuyToLetRemortgage")
{
divToHide1.style.display = "none";
divToHide2.style.display = "none";
}
else
{
divToHide1.style.display = "block";
divToHide2.style.display = "block";
}
} 
</script>
</head>
<body>
<select  id="selectList" name="namehere" title="Mortgage Type" onchange="toggle()">
<option value="FirstTimeBuyer">First Time Buyer</option> 
<option value="MovingHome">Moving Home</option>
<option value="Remortgage">Remortgage</option>
<option value="BuyToLetPurchase">Buy To Let Purchase</option>
<option value="BuyToLetRemortgage">Buy To Let Remortgage</option>
</select>
<div id="foundproperty">
<p>Have You Found A Property</p>
<input  id="foundpropery" type="checkbox" value="0" />
<br />
<br />
</div>
<div id="madeoffer">
<p>Have You Made An Offer</p>
<input  id="madeofferInput" type="checkbox" value="0" />
</div>
</body>
</html>

如果您使用的是 jquery，这篇文章可能会有所帮助：

Jquery : If select has option 1 show div

【讨论】：