这就是我正在做的:
<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> `
有没有什么方法可以在选择“医疗”选项时显示一组额外的按钮(主要是上传文件)(不指向新页面)?
最佳答案
您可以使用 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
比显示按钮否则隐藏它。
关于forms - 使用下拉列表更改表单内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22171496/