Jquery經過ajax實現三級聯動

jap部分

<select id="sheng">
                    <option value="--">請選擇</option>
                    <option value="hn">河南</option>
                    <option value="bj">北京</option>
            </select>
            <select id="city">
                    <option value="--">請選擇</option> 
            </select>
            <select id="xian">
                    <option value="--">請選擇</option> 
    </select>

js部分

<script type="text/javascript"> function pp() { var s = document.getElementById("city"); var index = document.getElementById("city").selectedIndex; return s[index].value; } $("#sheng").change( function() { var val = $("#sheng").val(); var json = { 'sheng' : val }; var url = "${pageContext.request.contextPath}/CheckOut?id=" + new Date().getTime(); $.post(url, json, function(response, status, xhr) { var jsonObject = eval("(" + response + ")"); document.getElementById("city").length = 1; for ( var i = 0; i < jsonObject.length; i++) { var option = document .createElement("option"); option.value = jsonObject[i].key; option.innerHTML = jsonObject[i].value; document.getElementById("city") .appendChild(option); } if (pp() == "--") { document.getElementById("xian").length = 1; } }) }) //----------------------------------------------------------------------- $("#city").change( function() { var val = $("#city").val(); var json = { 'city' : val }; var url = "${pageContext.request.contextPath}/SanJi?id=" + new Date().getTime(); $.post(url, json, function(response, status, xhr) { var jsonObject = eval("(" + response + ")"); document.getElementById("xian").length = 1; for ( var i = 0; i < jsonObject.length; i++) { var option = document .createElement("option"); option.value = jsonObject[i].key; option.innerHTML = jsonObject[i].value; document.getElementById("xian") .appendChild(option); } }) }) </script>

action部分

public class CheckOut extends ActionSupport {

    private String sheng;
    private List<City> list=new ArrayList<City>();
    public List<City> getList() {
        return list;
    }
    public void setList(List<City> list) {
        this.list = list;
    }
            public String getSheng() {
        return sheng;
    }
    public void setSheng(String sheng) {
        this.sheng = sheng;
    }

            @Override
            public String execute() throws Exception {
                if("hn".equals(sheng)){
                    City c1=new City("zz","鄭州");
                    City c2=new City("xx","新鄉");
                    City c3=new City("kf","開封");
                    list.add(c1);
                    list.add(c2);
                    list.add(c3);
                }
                if("bj".equals(sheng)){
                    City c1=new City("zy","朝陽");
                    City c2=new City("hd","海淀");
                    City c3=new City("cp","昌平");
                    list.add(c1);
                    list.add(c2);
                    list.add(c3);
                }

                JSONArray fromObject = JSONArray.fromObject(list);
                String string = fromObject.toString();
                HttpServletResponse response = ServletActionContext.getResponse();
                response.setContentType("text/html;charset=UTF-8");
                PrintWriter writer = response.getWriter();
                writer.write(string);
                writer.close();
                return NONE;
            }
}

//-------------------------------------------


public class SanJi extends ActionSupport {
    private String city;
    private List<Xian> list=new ArrayList<Xian>();
            public List<Xian> getList() {
        return list;
    }
    public void setList(List<Xian> list) {
        this.list = list;
    }
            public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
            @Override
            public String execute() throws Exception {
                if("zz".equals(city)){
                    Xian c1=new Xian("zy","中原區");
                    Xian c2=new Xian("eq","二七區");
                    Xian c3=new Xian("gx","高新區");
                    list.add(c1);
                    list.add(c2);
                    list.add(c3);
                }
                if("xx".equals(city)){
                    Xian c1=new Xian("yy","原陽");
                    Xian c2=new Xian("sz","私宅");
                    Xian c3=new Xian("db","大賓");
                    list.add(c1);
                    list.add(c2);
                    list.add(c3);
                }
                System.out.println(list);
                JSONArray fromObject = JSONArray.fromObject(list);
                System.out.println(fromObject);
                String string = fromObject.toString();
                System.out.println(string);
                HttpServletResponse response = ServletActionContext.getResponse();
                response.setContentType("text/html;charset=UTF-8");
                PrintWriter writer = response.getWriter();
                writer.write(string);
                writer.close();
                return NONE;


            }
}