在下拉菜單選擇中顯示和隱藏表單的一部分（div？）
[英]Showing and Hiding Part of a form (div?) on drop down menu selection
問題描述
我有一個查詢，希望對您有幫助，我已經搜索過，但無法找到確切問題的答案。
我有一個下拉（選擇）菜單，根據選擇需要顯示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？ 如何根據選擇顯示額外的字段
預先感謝您的幫助！
1 個解決方案
解決方案1
0 已采納 2011-10-26 16:53:38
我認為這可能是您嘗試做的事情的起點，您可以使用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，則此帖子可能會有所幫助：
根據下拉列表中的選擇顯示div的內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.