JQuery打造省市下拉框連動效果_jquery

做連動效果，若是用純JavaScript來做，往往需要輔助頁面儲存需要重新整理的結果集，然後渲染到原始頁面。考慮將需要動態刷新的內容自動拼接到前一個下拉框之後，當前一個下拉框onchange後，同級的後面的下拉框全部清除，然後重新拼接刷新的內容。用JQuery實作比較容易，程式碼以省市連動效果為例實作。

JSP頁面程式碼如下：

複製程式碼 程式碼如下:

生源地:

全部

${provinceInfo.provinceName}






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("baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 如果有子選項，則建立子下拉框
if(data != null){
// 刪除下拉框父級後的所有同級

$('#provinceCode').parent().nextAll('lable').remove();
var childId = "city";
// 判斷是否存在下一級下拉框不存在就建立

if($('#' childId).length == 0){ // 建立一個

並建立一個加入id為extra的

中$("

").appendTo($('#base')); }else{ //清空子下拉框內容$('#' childId).empty();

}

// 遍歷json串，填充子下拉框

$.each(data.city, function(i, item) {
$('#' childId).append(
" " item.nameAndCode
"");
});
}
});
}
}


根據省份獲取市的代碼如下：




複製代碼


代碼如下:


public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException( 🎜>List cityList = this .provinceAndCityInfoService。 🎜>if (cityList.size() > 0) {
cityJson = "{"city":[";
// 拼接查詢到的子項
for (int i = 0; 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); }