在下拉菜单选择中显示和隐藏表单的一部分(div?)



我有一个问题,我希望你能帮助我,我已经搜索,但不能找到一个答案,我的确切问题

我有一个下拉(选择)菜单,根据选择需要显示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 ?如何根据选择

显示额外的字段?

提前感谢任何帮助!

我认为这可以作为你尝试做的事情的起点,你使用div的"display"属性来显示/隐藏它取决于下拉菜单中选择的内容:

<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:如果select有选项1,显示div

最新更新