顯示和隱藏部分窗體（div？）上的下拉菜單選擇

我有一個查詢，我希望你可以幫忙，我已經搜查，但無法找到我的確切問題的答案。顯示和隱藏部分窗體（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個額外的表單字段

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？我如何根據選擇顯示額外的字段

提前感謝您的任何幫助！

來源

2011-10-26 Alex Mason

我覺得這可能是你試圖做一個起點，您可以使用div的「顯示」屬性來顯示/隱藏它取決於什麼在下拉列表中選擇'S：

<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

來源

2011-10-26 16:53:38 betafish

顯示和隱藏部分窗體（div？）上的下拉菜單選擇

回答

相關問題