Create provincial/municipal drop-down box linkages with JQuery _ jquery-js tutorial

It is easier to use JQuery to automatically splice the content that needs to be dynamically refreshed to the previous drop-down box. The Code uses the provincial/municipal linkage effect as an example to achieve the linkage effect. if JavaScript is used, it is often necessary to save the result set to be refreshed on the secondary page and then render it to the original page. Consider automatically splicing the content to be dynamically refreshed to the previous drop-down box. After the current drop-down box onchange, all the drop-down boxes after the same level are cleared, and then resplice the refreshed content. JQuery is easy to implement, and the Code is based on the provincial/municipal interaction effect.

The JSP page code is as follows:

The Code is as follows:

Source:

All $ {ProvinceInfo. provinceName}

The JavaScript code is as follows:

The Code is 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 );
// Send a Json request to query the data in the subdrop-down box
$. GetJSON ("<% = basePath %> baseInfo_getCitiesByProvinceId ",{
ProviceCode: $ ('# provinceCode'). val ()
}, Function (data ){
// If sub-options exist, create a sub-drop-down box
If (data! = Null ){
// Delete the parent level of the drop-down list After
$ ('# ProvinceCode'). parent (). nextAll ('lable'). remove ();
Var childId = "city ";
// Determine whether the next-level drop-down box does not exist.
If ($ ('#' + childId). length = 0 ){
// Create

And createAdd toMedium$ ("

"). AppendTo ($ ('# base '));
} Else {
// Clear the content of the subdrop-down list
$ ('#' + ChildId). empty ();
}
// Traverse the json string and fill in the sub-drop-down box
$. Each (data. city, function (I, item ){
$ ('#' + ChildId). append (
" "+ Item. nameAndCode
+"");
});
}
});
}

The code for getting a city from a province is as follows:

The Code is as follows:

Public void getCitiesByProvinceCode (String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException {
ProvinceInfo provinceInfo = this. provinceAndCityInfoService. getProvinceInfoByProperty ("code", proviceCode );
List CityList = this. provinceAndCityInfoService. getCityListByProperty ("belongProvinceId", provinceInfo. getId () + "");
// Initialize the Json string to be output
String cityJson = "";
// Traverse the set to construct a json string
If (cityList. size ()> 0 ){
CityJson = "{\" city \":[";
// Splice the queried subitem
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, the end is spliced. Otherwise, it is separated by commas (,).
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 );
}