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;


            }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

发疯的man

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值