Question

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

我有一个下拉（选择）菜单，根据选择需要显示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？如何根据选择显示额外字段

提前感谢您的帮助！

Answer 1

我认为这可以作为您尝试做的事情的起点，您可以使用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 : If select has option 1 show div

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

1 个答案: