forms - 使用下拉列表更改表单内容

Question

这就是我正在做的:

<form name="leave" method="post" action="lins.jsp" onSubmit="chk();">
<center>
<p>Leave Type: <select id="myl" name="Type">
    <option> </option>
    <option>Casual</option>
    <option>Extended</option>
    <option>Medical/Sick</option>
</select>    
<p>Start Date: <input type="text" id="datepicker" name="dt"></p>
<p>End Date: <input type="text" id="datepicker2" name="edt"></p>
<input type="submit" value="Submit" name="subm" />
<input type="reset" value="Clear" name="clr" />
</center>
</form>    `

有没有什么方法可以在选择“医疗”选项时显示一组额外的按钮(主要是上传文件)(不指向新页面)？

Answer 1

您可以使用 JQuery 实现此目的:

<script type="text/javascript">
  function showBtn(ele)
  {
     if($(ele).val() == "medical"){
         $("#uploadFile").show();
      }
     else{
         $("#uploadFile").hide();
      }
   }
</script>

HTML 代码:

<form name="leave" method="post" action="lins.jsp" onSubmit="chk();">
<center>
    <p>Leave Type: <select id="myl" name="Type" onchange="showBtn(this)">
                      <option> </option>
                      <option value="casual">Casual</option>
                      <option value="extended">Extended</option>
                      <option value="medical">Medical/Sick</option>
                   </select>    
    <p>Start Date: <input type="text" id="datepicker" name="dt"></p>
    <p>End Date: <input type="text" id="datepicker2" name="edt"></p>
    <input type="submit" value="Submit" name="subm" />
    <input type="reset" value="Clear" name="clr" />
    <input type="file" value="Upload File" name="file" id="uploadFile" style="display: none;" />
</center>
</form> 

我在这里为下拉列表中的选项赋予了值(value)，在表单中添加了上传文件按钮，但最初它是隐藏的。我在下拉列表的 onChange 事件上调用函数 showBtn(ele)，在该函数中我检查了如果所选选项的值是 medical 比显示按钮否则隐藏它。