[英]how to dynamically add the options(options are in form of“java.sql.ResultSet”) to the select tag in jsp
我想将选项添加到从数据库中检索到的选择标签中。 例如,如果用户想要某个商店的位置。 首先,数据库将检索“国家”并显示在选择标记中。 现在,选择国家/地区后,下一个州/省/自治区/直辖市/自治区号应显示在select标记中,具体取决于所选国家/地区,该标记将从数据库中检索。
JSP在服务器端进行编译。 您要完成的是在客户端进行的DOM操作。 您不能基于使用JSP标记选择的国家动态生成州名称。 您必须使用javascript和Ajax来完成。 使用远程数据源签出jQuery Autocomplete
我宁愿发布一些代码。
的HTML
<select id="PIA" name="PIA" tabindex="2" class='combobox' required='required' placeholder="Select Office">
<option value="!valid">Select Office</option>
<option value='AHD'>AHEMDABAD</option>
<option value='BPL'>BHOPAL</option>
<option value='BHU'>BHUBNESWAR</option>
<option value='COC'>COCHIN</option>
<option value='DLH'>DELHI</option>
<option value='GZB'>GHAZIABAD</option>
<option value='GUW'>GUWAHATI</option>
<option value='HYD'>HYDERABAD</option>
<option value='JPR'>JAIPUR</option>
<option value='JAL'>JALANDHAR</option>
<option value='JMU'>JAMMU</option>
<option value='CAL'>KOLKATA</option>
<option value='KOZ'>KOZHIKODE</option>
<option value='LKO'>LUCKNOW</option>
<option value='BOM'>MUMBAI</option>
<option value='PAT'>PATNA</option>
<option value='SUR'>SURAT</option>
<option value='ASR'>AMRITSAR</option>
<option value='BLY'>BAREILLY</option>
<option value='DDN'>DEHRADUN</option>
<option value='MLP'>MALAPPURAM</option>
<option value='NGP'>NAGPUR</option>
<option value='GOA'>PANAJI</option>
<option value='PNE'>PUNE</option>
<option value='RPR'>RAIPUR</option>
<option value='RCH'>RANCHI</option>
<option value='SML'>SHIMLA</option>
<option value='SGR'>SRINAGAR</option>
<option value='THN'>THANE</option>
<option value='TVM'>TRIVANDRUM</option>
</select>
</td>
<!-- District -->
<td><div class="ui-widget" id='distPop'>
<select id='district' name='district' tabindex="2" class='combobox'>
<option id="!valid" value='!valid'>Select District</option>
</select>
</div>
Java脚本
$('document').ready(function(){
$('#PIA').combobox({
maxheight: '100px',
selected: function(e,u){
$.getJson({
"yourURL",
$(this).val();
function(districts){
$.each(districts[$(this).val()], function(key, value){
$('#district').append("<option value='"+key+"'>"+value+
"</option>");
});
});
});
});
不要忘记在页面顶部包含jquery和jquery UI脚本。
<script type="text/javascript">
var xmlRequest;
function changeCities() {
xmlRequest = new XMLHttpRequest();
xmlRequest.open("get", "CityServlet?stateId=2", true);
xmlRequest.send(null);
xmlRequest.onReadyStateChange = processResponse;
}
function processResponse() {
alert(1);
if(xmlRequest.readyState == 4 && xmlRequest.status == 200) {
alert(xmlRequest.responseText);
var response = xmlRequest.responseText;
document.getElementById("res").value = response;
}
}
</script>
<body>
<form action="post" name="customerRegForm">
<select name="state" onchange="changeCities()">
<option value="1">Gujarat</option>
<option value="2">Rajasthan</option>
</select>
<select name="cities"> </select>
<input type="text" name="res"></input>
</form>
</body>
编写一个Servlet,该Servlet接受从XMLHttpRequest
传递的参数,并从Servlet返回响应。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.