如何在 PHP 中选择下拉项时启用第二个条件输入表单

Question

任务：

为选项值创建下拉列表："Name1...Name2...Name3...Others"。因此，当用户单击选项 'Others' 时，它将生成一个额外的表单字段供用户输入，它们是："Name, Rego No., Address".

已完成：

我创建了如下所示的下拉列表：

<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>

因此，可以显示下拉列表。此外，我还为 3 个附加字段创建了 html 版本，如下所示：

<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)

问题： 在这一点上，我被困在如何从下拉列表中调用用户 select 'Others' 时如何调用额外的 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>

Answer 1

使用 Jquery，将这 3 个额外字段放入 ID 为 #extradiv 的 div 中，并将其样式设置为 display:none 以在加载时隐藏。

 <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>

Answer 2

您必须使用 javascript 或 jquery。

只需将您的其他表单元素包装在 div 下并为其指定 ID，例如 other_ele，并且默认使用 css 将其设为 div display:none。

只需尝试下面的代码，我为此使用了 javascript

首先在你的 select 标签上使用 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 是您的 div 的 ID，您在其中包装了额外的表单元素。

希望这对你有用

如何在 PHP 中选择下拉项时启用第二个条件输入表单

How to bring on second condition input form when selected dropdown item in PHP

javascript

php

drop-down-menu

html-select

html.dropdownlistfor