我想将选项添加到我从数据库中检索到的select标签中。 例如 如果用户想要某个商店的位置。 首先,数据库将检索“country”并显示在select标签中。 现在选择国家/地区时,下一个州应显示在选择标记中,该标记根据所选国家/地区从数据库中检索。
答案 0 :(得分:0)
JSP在服务器端编译。你想要完成的是DOM操作,它发生在客户端。您无法根据使用JSP标记选择的国家/地区动态生成状态名称。你必须使用javascript和Ajax。查看jQuery Autocomplete with remote datasource
我宁愿发布一些代码。
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>
的Javascript
$('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脚本。
答案 1 :(得分:0)
<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,它接受从XMLHttpRequest
传递的参数并从servlet返回响应。