javascript — Как вызвать вторую форму ввода условия, когда выбранный выпадающий элемент в переполнении стека
Задача:
Чтобы создать раскрывающийся список значений параметров: «Имя1 … Имя2 … Имя3 … Другие». Следовательно, когда пользователь должен был щелкнуть опцию «Другие», он сгенерирует дополнительные поля формы для ввода пользователем, и они будут: «Имя, Рего №, Адрес».
Что сделано:
Я создал следующий выпадающий список, как показано:
<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 и дать ему идентификатор, например other_ele а также сделал этот div display:none по умолчанию используется css.
Просто попробуйте этот код ниже, я использовал JavaScript для этого
Сначала на ваш выбор тега использования onchange лайк:
<select name ="Name" id="NameDetails" onchange="return val(this.value);">
Этот onchange будет вызывать функцию 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 id вашего 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>