快捷導(dǎo)航

JQuery打造省市下拉框聯(lián)動效果

更新時間：2014年05月18日 17:11:18 作者：

考慮將需要動態(tài)刷新的內(nèi)容自動拼接到前一個下拉框之后等等，用JQuery實現(xiàn)比較容易，代碼以省市聯(lián)動效果為例實現(xiàn)

做聯(lián)動效果，若是用純JavaScript來做，往往需要輔助頁面保存需要刷新的結(jié)果集，然后渲染到原頁面?？紤]將需要動態(tài)刷新的內(nèi)容自動拼接到前一個下拉框之后，當(dāng)前一個下拉框onchange后，同級的后面的下拉框全部清除，然后重新拼接刷新的內(nèi)容。用JQuery實現(xiàn)比較容易，代碼以省市聯(lián)動效果為例實現(xiàn)。

JSP頁面代碼如下：

復(fù)制代碼代碼如下:

 
<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代碼如下：

復(fù)制代碼代碼如下:

 
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); 
// 發(fā)出Json請求，查詢子下拉框選項數(shù)據(jù) 
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", { 
proviceCode : $('#provinceCode').val() 
}, function(data) { 
// 如果有子選項，則創(chuàng)建子下拉框 
if(data != null){ 
// 刪除下拉框父級<lable>后的所有同級<lable> 
$('#provinceCode').parent().nextAll('lable').remove(); 
var childId = "city"; 
// 判斷是否存在下一級下拉框 不存在就創(chuàng)建 
if($('#'+childId).length == 0){ 
// 創(chuàng)建一個<li>并創(chuàng)建一個<select>添加到id為extra的<ul>中 
$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base')); 
}else{ 
//清空子下拉框內(nèi)容 
$('#' + childId).empty(); 
} 
// 遍歷json串，填充子下拉框 
$.each(data.city, function(i, item) { 
$('#' + childId).append( 
"<option value='"+item.code+"'>" + item.nameAndCode 
+ "</option>"); 
}); 
} 
}); 
} 

根據(jù)省份獲取市的代碼如下：

復(fù)制代碼代碼如下:

 
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()+""); 
// 初始化準(zhǔn)備輸出的Json串 
String cityJson = ""; 
// 遍歷集合，構(gòu)造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() +")" 
+ "\"}"; 
// 如果是集合中最后一項，則拼接結(jié)束符，否則用","隔開 
if (i == cityList.size() - 1) { 
cityJson = cityJson + temp + "]}"; 
} else { 
cityJson = cityJson + temp + ","; 
} 
} 
} 
// 設(shè)置輸出的字符集和類型并輸出json串 
response.setCharacterEncoding("UTF-8"); 
response.setContentType("json"); 
response.getWriter().print(cityJson); 
} 