Отображение и скрытие части формы (div?) В выпадающем меню - PullRequest
Новая
       4

Отображение и скрытие части формы (div?) В выпадающем меню

0 голосов
/ 26 октября 2011

У меня есть вопрос, надеюсь, вы можете помочь, я искал, но не могу найти ответ на мой точный вопрос.

У меня есть выпадающее меню (выбор), которое в зависимости от выбора должно отображать 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 Ответ

0 голосов
/ 26 октября 2011

Я думаю, что это может быть отправной точкой для того, что вы пытаетесь сделать, вы используете свойство 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...