兩級別聯動 jquery+json實現

//首先建立 兩級聯動的兩個實體類 省市類
package com.javamail.controller.vo;

import java.util.List;

public class Province {
    private int pid;
    private String pname;
    private List<City> cities;
    public Province(int pid, String pname, List<City> cities) {
        super();
        this.pid = pid;
        this.pname = pname;
        this.cities = cities;
    }
    public Province() {
        // TODO Auto-generated constructor stub
    }
    public List<City> getCities() {
        return cities;
    }
    public void setCities(List<City> cities) {
        this.cities = cities;
    }
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public String getPname() {
        return pname;
    }
    public void setPname(String pname) {
        this.pname = pname;
    }
     
}
//城市類
package com.javamail.controller.vo;

public class City {
    private int cid;
    private String cname;
    private int parentid;
    public City(int cid, String cname) {
        super();
        this.cid = cid;
        this.cname = cname;
    }
    public int getCid() {
        return cid;
    }
    public void setCid(int cid) {
        this.cid = cid;
    }
    public String getCname() {
        return cname;
    }
    public void setCname(String cname) {
        this.cname = cname;
    }
    
     public int getParentid() {
        return parentid;
    }
    
    public void setParentid(int parentid) {
        this.parentid = parentid;
    }
    public City() {
        // TODO Auto-generated constructor stub
    }
    public City(int cid, String cname, int parentid) {
        super();
        this.cid = cid;
        this.cname = cname;
        this.parentid = parentid;
    }    
    
}
//後臺 組合數據 用jackson把list轉換成 json格式的數據傳到頁面
package com.javamail.controller;

import java.io.IOException;
import java.io.StringWriter;
import java.io.Writer;
import java.util.ArrayList;
import java.util.List;

import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.javamail.controller.vo.City;
import com.javamail.controller.vo.Province;


@Controller
@RequestMapping(value="/threelinkage")
public class ThreeLinkage {
    @RequestMapping(value="redirt")
    public ModelAndView redirt(){
        ModelMap modelMap = new ModelMap();
        //建立第一個省下的城市
        List<City> cs1 = new ArrayList<City>();
        City c1=new City();
        c1.setCid(10);
        c1.setCname("涿州市");
        c1.setParentid(1);
        City c2=new City();
        c2.setCid(11);
        c2.setCname("高碑店");
        c2.setParentid(1);
        cs1.add(c1);
        cs1.add(c2);
        //建立第一個省
        Province province = new Province();
        province.setPid(1);
        province.setPname("河北省");
        province.setCities(cs1);
        
        //建立第二個省城市
        List<City> cs2 = new ArrayList<City>();
        City c3=new City();
        c3.setCid(21);
        c3.setCname("朝陽區");
        c3.setParentid(2);
        City c4=new City();
        c4.setCid(11);
        c4.setCname("海淀區");
        c4.setParentid(2);
        cs2.add(c3);
        cs2.add(c4);
        //建立第二個省
        Province province2 = new Province();
        province2.setPid(2);
        province2.setCities(cs2);
        province2.setPname("北京");
        
        //放在一個List裏面
        List<Province> p = new ArrayList<Province>();
        p.add(province);
        p.add(province2);
        //把list轉換成json格式
        ObjectMapper mapper = new ObjectMapper();
        Writer strWriter = new StringWriter();
        try {
            mapper.writeValue(strWriter, p);
            modelMap.put("data",strWriter);
            System.out.println(strWriter);
        } catch (JsonGenerationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (JsonMappingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        ModelAndView modelAndView = new ModelAndView("threelinkage",modelMap);
        return modelAndView;
    }

}
//jsp頁面接收數據 轉成json對象 進行操做
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        //初始化方法
        var d = jQuery.parseJSON('${data}');
        var $pselect = $("select[name=province]"); 
        var $cselect =$("select[name=city]");
        var parentid="";
        var pid=1;
        for(var i = 0;i<d.length;i++){
            $pselect.append('<option value="'+d[i].pid+'">'+d[i].pname+'</option>');  
            for(var j = 0;j<d[i].cities.length;j++){
                parentid = (d[i].cities)[j].parentid;
                if(pid == parentid){
                    $cselect.append('<option value="'+(d[i].cities)[j].cid+'">'+(d[i].cities)[j].cname+'</option>');
                } 
            }
        }

        $("select[name=province]").change(function(){
            var d = jQuery.parseJSON('${data}');
            var p1=$(this).children('option:selected').val();//這就是selected的值 value
<%--            var p2=$(this).children('option:selected').text();--%>//獲取selected的文本值
            //先清空city select中的值
            $cselect.empty();
            for(var i = 0;i<d.length;i++){
                if(d[i].pid == p1){
                    for(var j = 0;j<d[i].cities.length;j++){
                        $cselect.append('<option value="'+(d[i].cities)[j].cid+'">'+(d[i].cities)[j].cname+'</option>');
                    }
                }
            }
        })
    })
</script>
</head>
<body>
    省：<select  name="province">
        </select>
    市：<select  name="city">
    </select>
</body>
</html>