Javascript 数据库填充链接下拉菜单
我创建了这个JSP页面,其中所有下拉菜单都是从数据库填充的。这个功能很好,我已经测试过了。但是现在我需要添加一个函数,这样第三个下拉菜单(Forecast ISC)只有在我从第一个菜单(类型)中选择某个字段时才可见。到目前为止,我还没有创建任何java脚本,因为我需要帮助!任何建议或评论都会有帮助Javascript 数据库填充链接下拉菜单,javascript,jquery,Javascript,Jquery,我创建了这个JSP页面,其中所有下拉菜单都是从数据库填充的。这个功能很好,我已经测试过了。但是现在我需要添加一个函数,这样第三个下拉菜单(Forecast ISC)只有在我从第一个菜单(类型)中选择某个字段时才可见。到目前为止,我还没有创建任何java脚本,因为我需要帮助!任何建议或评论都会有帮助 <form:form action="/analysis/analysisSummary" modelAttribute="shipData" method="POST" onCha
<form:form action="/analysis/analysisSummary" modelAttribute="shipData"
method="POST" onChange = 'checkType()'>
<br>
<table width="100%">
<tr>
<td width="20%"></td>
<td width="20%">Type:<form:select id="type" path="type">
<form:option value="All">------ All ------ </form:option>
<form:options items="${analysisEvents}" itemLabel="description"
itemValue="code" />
</form:select>
</td>
<td width="20%">Forecast ISC:<form:select id="iscCode"
path="iscCode">
<form:option value="All">ALL</form:option>
<form:options items="${iscCodes}" />
</form:select>
</td>
<td width="30%"><div style="visibility: hidden">
Actual ISC: <form:select id="sctry"
path="iscCode">
<form:option value="All">ALL</form:option>
<form:options items="${iscCodes}" />
</form:select>
</div>
</td>
HTML:
为了
因为你需要做的第一件事就是简化问题。问题与Java或JSP无关,这都是关于jQuery和JavaScript的。你能在JSP呈现后发布HTML吗?很抱歉我编辑了我的问题!所以基本上,当用户从类型下拉列表中选择Long Term Pending时,第三个下拉列表应该出现。您需要做的第一件事是简化问题。问题与Java或JSP无关,这都是关于jQuery和JavaScript的。你能在JSP呈现后发布HTML吗?很抱歉我编辑了我的问题!所以基本上,当用户从类型下拉列表中选择Long Term Pending时,第三个下拉列表应该出现。我尝试过这段代码,但由于某些原因,它不起作用。你在网站上的演示可以正常工作,但在我这方面不行。请记住,这些下拉列表是从数据库填充的。只有当我硬编码下拉列表中的所有字段时,此代码才起作用。@Fahad:-对于表单id=shipData,对于类型dropdown id=type,像这样的三个id shipData,type,divisiccode应该在呈现JSP之后存在。您使用的是什么版本的jquery?这就是问题所在,它现在正在工作!!再次感谢你的帮助!我有一个私人问题要问你@ThulasiRam能告诉我你的电子邮件地址吗?我不想把我的问题贴在这里。如果你愿意,你可以发电子邮件给我fshafeeq82@gmail.com谢谢我试过这个代码,但由于某种原因它不起作用。你在网站上的演示可以正常工作,但在我这方面不行。请记住,这些下拉列表是从数据库填充的。只有当我硬编码下拉列表中的所有字段时,此代码才起作用。@Fahad:-对于表单id=shipData,对于类型dropdown id=type,像这样的三个id shipData,type,divisiccode应该在呈现JSP之后存在。您使用的是什么版本的jquery?这就是问题所在,它现在正在工作!!再次感谢你的帮助!我有一个私人问题要问你@ThulasiRam能告诉我你的电子邮件地址吗?我不想把我的问题贴在这里。如果你愿意,你可以发电子邮件给我fshafeeq82@gmail.com谢谢
<form id="shipData" onChange="checkType()" action="/analysis/analysisSummary" method="POST">
<br>
<table width="100%">
<tr>
<td width="20%"></td>
<td width="20%">Type:<select id="type" name="type">
<option value="All">------ All ------</option>
<option value="U">Unanalyzed</option><option value="H">Pending</option><option value="F">True Hit</option><option value="C">Return Reason</option><option value="S">Parcel Returned</option><option value="T">Long Term Pending</option><option value="Z">Value >2500</option>
</select>
</td>
<td width="20%">Forecast ISC:<select id="iscCode" name="iscCode">
<option value="All">ALL</option>
<option value="JFK">JFK</option><option value="LAX">LAX</option><option value="MIA">MIA</option><option value="ORD">ORD</option><option value="SFO">SFO</option>
</select>
</td>
<td width="30%"><div style="visibility: hidden">
Actual ISC: <select id="sctry" name="iscCode">
<option value="All">ALL</option>
<option value="JFK">JFK</option><option value="LAX">LAX</option><option value="MIA">MIA</option><option value="ORD">ORD</option><option value="SFO">SFO</option>
</select>
</div>
</td>
<td width="8%"></td>
</tr>
</table>
<br>
<table width="100%">
<tr>
<td width="20%"></td>
$(document).ready(function () {
$('#shipData').find('#type').change(function () {
if ($(this).val() == 'T') {
$('#shipData').find('#divIscCode').show(); //To show only drop down
//$('#shipData').find('#sctry').val('All'); //To initial value if required.
} else {
$('#shipData').find('#divIscCode').hide();
}
}).trigger('change');
});