做聯動效果，若是用純JavaScript來做，往往需要輔助頁面保存需要刷新的結果集，然後渲染到原頁面。考慮將需要動態刷新的內容自動拼接到前一個下拉框之後，當前一個下拉框onchange後，同級的後面的下拉框全部清除，然後重新拼接刷新的內容。用JQuery實現比較容易，代碼以省市聯動效果為例實現。
JSP頁面代碼如下：
. 代碼如下:
<li id="base">
<p>生源地:</p>
<label>
<select id="provinceCode" name="provinceCode" onchange="refreshCity()">
<option value="">全部</option>
<c:forEach items="${provinceInfoList}" var="provinceInfo">
<option value="${provinceInfo.code}">${provinceInfo.provinceName}</option>
</c:forEach>
</select>
</label>
</li>
JavaScript代碼如下：
. 代碼如下:
function refreshCity(){
if($('#provinceCode').find('option:selected').val() == ""){
$('#provinceCode').parent().nextAll('lable').remove();
return;
}
//省份名稱
var provinceName = $('#provinceCode').find('option:selected').text();
provinceName = provinceName.substring(0,provinceName.length-4);
// 發出Json請求，查詢子下拉框選項數據
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 如果有子選項，則創建子下拉框
if(data != null){
// 刪除下拉框父級<lable>後的所有同級<lable>
$('#provinceCode').parent().nextAll('lable').remove();
var childId = "city";
// 判斷是否存在下一級下拉框 不存在就創建
if($('#'+childId).length == 0){
// 創建一個<li>並創建一個<select>添加到id為extra的<ul>中
$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base'));
}else{
//清空子下拉框內容
$('#' + childId).empty();
}
// 遍歷json串，填充子下拉框
$.each(data.city, function(i, item) {
$('#' + childId).append(
"<option value='"+item.code+"'>" + item.nameAndCode
+ "</option>");
});
}
});
}
根據省份獲取市的代碼如下：
. 代碼如下:
public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");
// 初始化准備輸出的Json串
String cityJson = "";
// 遍歷集合，構造json串
if (cityList.size() > 0) {
cityJson = "{\"city\":[";
// 拼接查詢到的子項
for (int i = 0; i < cityList.size(); i++) {
CityInfo city = cityList.get(i);
String temp = "{\"code\":\"" + city.getCode()
+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"
+ "\"}";
// 如果是集合中最後一項，則拼接結束符，否則用","隔開
if (i == cityList.size() - 1) {
cityJson = cityJson + temp + "]}";
} else {
cityJson = cityJson + temp + ",";
}
}
}
// 設置輸出的字符集和類型並輸出json串
response.setCharacterEncoding("UTF-8");
response.setContentType("json");
response.getWriter().print(cityJson);
}