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

【问题标题】：Change Form content with drop down lis使用下拉列表更改表单内容
【发布时间】：2014-03-04 12:06:23
【问题描述】：

这就是我正在做的事情：

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

在选择了医疗选项时显示了一组附加的按钮（基本上要上传文件）（不指向新页面）？

【问题讨论】：

标签： forms jsp

【解决方案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>

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

【讨论】：

【解决方案2】：

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

希望对你有帮助！！

【讨论】：