JQuery creates linkage effect of province and city drop-down boxes

JQuery creates linkage effect of province and city drop-down boxes_jquery

WBOY

Release： 2016-05-16 16:47:50

Original

1214 people have browsed it

To do linkage effects, if you use pure JavaScript, you often need an auxiliary page to save the result set that needs to be refreshed, and then render it to the original page. Consider automatically splicing the content that needs to be dynamically refreshed after the previous drop-down box. After the current drop-down box onchanges, all subsequent drop-down boxes at the same level are cleared, and then the refreshed content is re-spliced. It is easier to implement with JQuery. The code is implemented using the province and city linkage effect as an example.

The JSP page code is as follows:

Copy code The code is as follows:

< ;li id="base">

Place of origin:

The JavaScript code is as follows:

Copy code Code As follows:

function refreshCity(){
if($('#provinceCode').find('option:selected').val() == ""){
$('#provinceCode').parent().nextAll('lable').remove();
return;
}
//Province name
var provinceName = $('#provinceCode ').find('option:selected').text();
provinceName = provinceName.substring(0,provinceName.length-4);
//Issue a Json request to query the sub-drop-down box option data
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// If there are child options, create a child drop-down box
if(data != null){
// Delete all siblings after the drop-down box parent
$(' #provinceCode').parent().nextAll('lable').remove();
var childId = "city";
// Determine whether the next level drop-down box exists and create it if it does not exist
if($('#' childId).length == 0){
// Create a

and create a

").appendTo($('#base'));
}else{
//Empty the content of the child drop-down box
$('#' childId).empty();
}
// Traverse the json string and fill the child drop-down box
$ .each(data.city, function(i, item) {
$('#' childId).append(
"");
});
}
});
}

Get the city code according to the province as follows:

Copy code The code is as follows:

 
public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException , JSONEXCEPTION, IOEXception {
 PROVINCEINFO PROVINCEINFO = This.ProvincityInfoservice.getProvincobaby ("Code", ProvicCode;  list & lt; cityInfo & gt; cityList = this.ProvincityInfoservice.getCityListByproperty ("BelongprovindId", "BelongProvinceid", "" ); 
// Initialize the Json string to be output 
String cityJson = ""; 
// Traverse the collection and construct the json string 
if (cityList.size() > 0) { 
cityJson = "{"city":["; 
// Splice the queried sub-items
for (int i = 0; i < cityList.size(); i ) { 
CityInfo city = cityList.get(i); 
String temp = "{"code":"" city.getCode() 
 "","nameAndCode":"" city.getName() "(" city.getCode () ")" 
 ""}"; 
// If it is the last item in the collection, splice the terminator, otherwise use "," to separate it
if (i == cityList.size( ) - 1) { 
cityJson = cityJson temp "]}"; 
} else { 
cityJson = cityJson temp ","; 
} 
} 
} 
/ / Set the output character set and type and output the json string 
response.setCharacterEncoding("UTF-8"); 
response.setContentType("json"); 
response.getWriter().print(cityJson ); 
} 