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 hide / show（）事件来显示创建一个按钮，

<button id="hideMe">Upload file</button>

关注jquery，

 $(document).ready(function(){
   $("#hideMe").hide();
    var selVal=$('#my1').va();
    if(selVal=="Medical"){
    $("#hideMe").show();
    }
      return false;
      });
    });

希望它有所帮助!!

Answer 2

您可以使用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>

这里我给了下拉选项的价值，在表单中添加了上传文件按钮，但最初它是隐藏的。我在showBtn(ele)下拉事件中调用了函数onChange，在该函数中我已经判断如果所选选项的值为medical而不是显示按钮，则隐藏它。

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

2 个答案: