jquery+ajax實現二級聯動
阿新 • • 發佈：2018-11-19
實現效果圖：
前臺頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery+ajax實現二級聯動</title> <script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script> <script type="text/javascript"> $(function(){ $.get("/zq/findParentCitys",function(result){ $.each(result,function(index,obj){ $("#province").append("<option value='"+obj.id+"'>"+obj.name+"</option>"); }); }) //當省份改變的時候 $("#province").change(function(){ //獲取省份id var pid = $(this).val(); if(pid==-1){ $("#city").html("<option value='-1'>請選擇</option>"); return; } $("#city").empty();// 清空city下面所有的option元素 //先在快取中進行查詢(取快取中的資料) var result = $("#city").data(pid); //如果快取有值，直接迴圈迭代 if(result){ $.each(result,function(index,obj){ $("#city").append("<option value='"+obj.id+"'>"+obj.name+"</option>"); }); }else{ //如果沒有快取依然傳送語句進行查詢 $.get("/zq/findChildCityByPid",{"pid":pid},function(result){ //把資料快取起來 $("#city").data(pid,result); $.each(result,function(index,obj){ $("#city").append("<option value='"+obj.id+"'>"+obj.name+"</option>"); }); }); } }); }); </script> </head> <body> 省:<select id="province" > <option value="-1">請選擇</option> </select> 市:<select id="city"> <option value="-1">請選擇</option> </select> </body> </html>
後臺：
@Controller public class CityController { //查詢所有的省份 @RequestMapping("/findParentCitys") @ResponseBody public List<City> findParentCitys(){ return CityService.findParentCitys(); } //根據省份的id去找對應的市 @RequestMapping("/findChildCityByPid") @ResponseBody public List<City> findChildCityByPid(Long pid){ return CityService.findCitysByPid(pid); } }
bean類：
public class City { private Long id;//城市id private String name;//城市名 private City parent;//父級城市 public City() {} public City(Long id, String name, City parent) { super(); this.id = id; this.name = name; this.parent = parent; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public City getParent() { return parent; } public void setParent(City parent) { this.parent = parent; } @Override public String toString() { return "City [id=" + id + ", name=" + name + "]"; } }
準備資料：
public class CityService {
private static List<City> parents = new ArrayList<City>();
private static List<City> childrens = new ArrayList<City>();
//初始化資料
static{
Long id= 1L;
City parentCity1 = new City(id++,"四川省",null);
parents.add(parentCity1);
City city = new City(id++,"都江堰市",parentCity1);
childrens.add(city);
city = new City(id++,"成都市",parentCity1);
childrens.add(city);
city = new City(id++,"綿陽市",parentCity1);
childrens.add(city);
city = new City(id++,"內江市",parentCity1);
childrens.add(city);
city = new City(id++,"德陽市",parentCity1);
childrens.add(city);
City parentCity2 = new City(id++,"廣東省",null);
parents.add(parentCity2);
city = new City(id++,"東莞市",parentCity2);
childrens.add(city);
city = new City(id++,"廣州市",parentCity2);
childrens.add(city);
city = new City(id++,"佛山市",parentCity2);
childrens.add(city);
city = new City(id++,"深圳市",parentCity2);
childrens.add(city);
}
//獲取父級城市
public static List<City> findParentCitys(){
return parents;
}
/**
* 根據父級城市id，去找對應的下級城市
* @param pid 父級城市id
*/
public static List<City> findCitysByPid(Long pid){
List<City> citys = new ArrayList<City>();
for (City city : childrens) {
if(city.getParent().getId().equals(pid)){
citys.add(city);
}
}
return citys;
}
public static void main(String[] args) {
for (City c : findParentCitys()) {
System.out.println(c);
List<City> citys = findCitysByPid(c.getId());
for (City city : citys) {
System.out.println("=="+city);
}
}
}
}