Operation effect: ======================================== =========== Part of the code: ================================ =================== Of course you must have this table in your database first, otherwise you will have no data...^_^
Location: ${xzqh.province }
js code:
/** * Load City * */ function loadCity() { var provinceId = $("#provinceSelect option:selected").val() ; if(provinceId == null || provinceId == ""){ //alert("Province not found"); }else{ $.post(rootPath "/ loadCity", { "q" : provinceId }, function(data, result) { if(data == "noId"){ alert("Request error"); }else if(data == "null"){ alert("The system cannot find the city belonging to the province"); }else{ data = eval("{" data "} "); var citySelect = $("#citySelect"); var myCity = $("#myCity").val(); citySelect.html(""); for ( var i = 0; i < data.length; i ) { if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){ citySelect.append("" data[i].name " "); }else{ citySelect.append("" data[i].name " "); } } loadRegion(); } }); } }; /** * Loading area * */ function loadRegion() { var cityId = $("#citySelect option:selected").val(); if(cityId == null || cityId == "" || cityId < 1){ alert( "City not found"); }else{ $.post(rootPath "/loadRegion", { "q" : cityId }, function(data, result) { if(data == "noId"){ alert("Request error"); }else if(data == "null"){ alert("The system cannot find the file belonging to this city region"); }else{ data = eval("{" data "}"); var regionSelect = $("#regionSelect"); var myRegion = $(" #myRegion").val(); regionSelect.html(""); for ( var i = 0; i < data.length; i ) { if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){ regionSelect.append("" data[i].name " "); }else{ regionSelect.append("" data[i].name " "); } } } }); } }; /** * Province change event * */ $("#provinceSelect").change(loadCity); /** * City change event * */ $("#citySelect").change(loadRegion ); $(function() { loadCity(); });
Background methods:
/** * Load city data * */ public void loadCity() { if (q == null || q.trim().equals("")) { write("noId"); } else { List citys = xzqhService.queryCitys(q.trim()); if (citys == null || citys.size() < 1) { write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh city : citys) { builder.append("{'id':'"); builder.append(city.getCityId()); builder.append("','name':'"); builder.append(city.getCity()); builder.append("'},"); } if (builder.length() > 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } } /** * Load area data * */ public void loadRegion() { if (q == null || q.trim().equals("")) { write("noId"); } else { List citys = xzqhService.queryDistricts(q.trim()); if (citys == null || citys.size() < 1) { write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh district : citys) { builder.append("{'id':'"); builder.append(district.getRegionId()); builder.append("','name':'"); builder.append(district.getRegion()); builder.append("'},"); } if (builder.length() > 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } }