JQuery to create provincial and municipal drop down box linkage effect

Do linkage effect, if the use of pure JavaScript to do, often need to save the auxiliary page needs to refresh the result set, and then render to the original page. Consider automatically stitching the content that needs dynamic refresh to the previous drop-down box, and then after the current drop-down box onchange, all the subsequent drop-down boxes of the same level are cleared, and then restitching the refreshed content. It is easy to implement with JQuery. The code is implemented by taking the linkage effect of provinces and cities as an example.

The JSP page code is as follows:

 
<li id="base"> 
<p> students :</p> 
<label> 
<select id="provinceCode" name="provinceCode" onchange="refreshCity()"> 
<option value=""> all </option> 
<c:forEach items="${provinceInfoList}" var="provinceInfo"> 
<option value="${provinceInfo.code}">${provinceInfo.provinceName}</option> 
</c:forEach> 
</select> 
</label> 
</li> 

The JavaScript code is as follows:

 
function refreshCity(){ 
if($('#provinceCode').find('option:selected').val() == ""){ 
$('#provinceCode').parent().nextAll('lable').remove(); 
return; 
} 
//The name of the province
var provinceName = $('#provinceCode').find('option:selected').text(); 
provinceName = provinceName.substring(0,provinceName.length-4); 
//Issue a Json request to query the subdrop-down box option data
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", { 
proviceCode : $('#provinceCode').val() 
}, function(data) { 
//If there are suboptions, create a child drop-down box
if(data != null){ 
//Remove the parent of the drop-down box <Lable> All subsequent siblings <Lable>
$('#provinceCode').parent().nextAll('lable').remove(); 
var childId = "city"; 
//Determines if there is a drop-down box at the next level that does not exist
if($('#'+childId).length == 0){ 
//Create an <Li> And create an <Select> Add to < with id extra; Ul> In the
$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base')); 
}else{ 
//Empty the contents of the drop-down box
$('#' + childId).empty(); 
} 
//Iterate over the json string, populating the child drop-down box
$.each(data.city, function(i, item) { 
$('#' + childId).append( 
"<option value='"+item.code+"'>" + item.nameAndCode 
+ "</option>"); 
}); 
} 
}); 
} 

The code of city according to the province is as follows:

 
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()+""); 
//Initializes the Json string that is ready for output
String cityJson = ""; 
//Iterate over the collection to construct the json string
if (cityList.size() > 0) { 
cityJson = "{"city":["; 
//Concatenate the children of the query
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 set, then splice the terminator; otherwise, separate it with ","
if (i == cityList.size() - 1) { 
cityJson = cityJson + temp + "]}"; 
} else { 
cityJson = cityJson + temp + ","; 
} 
} 
} 
//Sets the output character set and type and outputs the json string
response.setCharacterEncoding("UTF-8"); 
response.setContentType("json"); 
response.getWriter().print(cityJson); 
}