Задача:
Чтобы создать раскрывающийся список для значений параметров: "Name1... Name2... Name3... Others". Следовательно, когда пользователь должен был нажать на опцию "Другие", он будет генерировать дополнительные поля формы для входа пользователя, и они: "Имя, номер регистра, адрес".
Что сделано:
Я создал следующий раскрывающийся список, как показано:
<p>
<!--Input select box with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
Следовательно, выпадающий список может быть показан. Кроме того, я также создал html-версию для 3 дополнительных полей, как показано ниже:
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorSearchNameResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="Rego No." id="Rego No." value="Reg No." title="Reg No." class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
....(Identical for "Address" field)
Проблема. На данный момент я застрял в том, как вызывать дополнительные 3 поля, когда пользователи выбирают "Другие" из выпадающего списка. Я попытался использовать условие "if..else", но застрял, когда попытался ввести вышеуказанный код в оператор if.
Следовательно, может ли кто-нибудь помочь? Благодарю.
редактирование кода:
<div>
<p>
<!--Input selectbox with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Agency..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
<!-- Set Conditional check, if user clicks Others, direct to input field: Name, Registration Number, Address-->
<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorNameCompanyResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
<div id="searchAddressResultsContainer" class="hide searchResultsContainer"></div>
<div id="errorSearchAddressResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
</div>
</div>
<script>
function val(x)
{
if (x =="Others" )
{
document.getElementById("extradiv").style.display ="block";
}else
{
document.getElementById("extradiv").style.display = "none";
}
}
</script>
Вы должны использовать javascript или jquery.
Просто оберните ваши дополнительные элементы формы под div
и дайте им id, например other_ele
а также other_ele
это display:none
div display:none
по умолчанию с помощью css.
Просто попробуйте этот код ниже. Я использовал javascript для этого
Сначала в вашем теге select используйте onchange
как:
<select name ="Name" id="NameDetails" onchange="return val(this.value);">
Этот обмен вызовет функцию val
И напишите свой сценарий таким образом
<script>
function val(x)
{
if(x == "Others")
{
document.getElementById("other_ele").style.display = "block";
}
else
{
document.getElementById("other_ele").style.display = "none";
}
}
</script>
Обратите внимание, что other_ele
является идентификатором вашего div, в котором вы завернули свои дополнительные элементы формы.
Надеюсь, это сработает для вас
Используйте Jquery, добавьте эти 3 дополнительных поля в div с id #extradiv и установите его стиль как отображение: ни один из них не будет скрыт при загрузке.
<div id="extradiv" style="display:none">
<!-- 3 extra fields -->
</div>
<script type="text/javascript">
$('#NameDetails').on('change',function(){
$('#extradiv").hide();
var changeVal = $("#NameDetails").val();
if(changeVal == "Others){
$("#extradiv").show();
});
</script>