省市区三级联动ajax提交，页面刷新后三级赋值

最新推荐文章于 2021-03-26 01:08:00 发布

weixin_33744141

最新推荐文章于 2021-03-26 01:08:00 发布

阅读量333

点赞数

文章标签：后端前端开发工具 ViewUI

原文链接：https://my.oschina.net/ytliyang/blog/1613059

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近做了一个省市区的三级联动，当时没考虑很多，就做了一个ajax的，如下图，但是查询后页面会刷新，始发地目的地会被初始化，不显示查询内容，这个后期花了一天才解决，下面一一叙述。

一，实现ajax的省市区三级联动

a.前端

 <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
    <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
    <ul class="ul-form">
        <li>
            <label>业务：</label><form:radiobuttons  path="businessType" items="${fns:getDictList('business_type')}" itemLabel="label" itemValue="value" htmlEscape="false" />
            <label>重量：</label><input id="kg" name="kg" value="${baseQueryEntity.kg}" type="text" maxlength="50" class="input-mini" autocomplete="off"/>
            快递业务指0-20KG段货物，快运业务指20KG以上货物
            <input id="btnSubmit" class="btn btn-primary" type="submit"  value="查询"/>
        </li>
        <li class="clearfix"></li>
        <li>
            <label>始发地：</label>
            <form:select id="s1" path="sprovince" maxlength="50" class="input-mini"></form:select>
            <form:select id="s2" path="scity" type="text" maxlength="50" class="input-mini"></form:select>
            <form:select id="s3" path="sregion" type="text" maxlength="50" class="input-mini"></form:select>
            <input id="stitle" name="stitle" value="${baseQueryEntity.stitle}" type="text" maxlength="50" class="input-xxlarge"/>
        </li>
        <li class="clearfix"></li>
        <li>
            <label>目的地：</label>
            <form:select id="s4" path="rprovince" type="text" maxlength="50" class="input-mini"></form:select>
            <form:select id="s5" path="rcity" type="text" maxlength="50" class="input-mini"></form:select>
            <form:select id="s6" path="rregion" type="text" maxlength="50" class="input-mini"></form:select>
            <input id="rtitle" name="rtitle" value="${baseQueryEntity.rtitle}" type="text" maxlength="50" class="input-xxlarge"/>
        </li>

select方法应该是有456的，太长了，我就截123好了，都是一样的。。。

 $(function () {
            select1();select4();
            $('#s1').bind("change", select2);
            $('#s2').bind("change", select3);
            $('#s4').bind("change", select5);
            $('#s5').bind("change", select6);

        });

        function select1() {
            var sprovince = "${baseQueryEntity.sprovince}";
            var url = "${ctx}/base/query/select1";
            $.ajax(
                {
                    type: "post",
                    url: url,
                    success: function (data) {
                        var dataObj = eval("(" + data + ")");
                        for (var i = 0; i < dataObj.length; i++) {
                            $("#s1").append("<option value=" + dataObj[i].code + ">" + dataObj[i].name + "</option>");
                        }
                        if(null!= sprovince){
                            $('#s1').val([sprovince]).trigger('change');
                        }
//                        select2();
                    }, error: function (text) {
                    }
                });

        };
        function select2() {
            var scity = "${baseQueryEntity.scity}";
            $("#s2").html("");
            var url = "${ctx}/base/query/select2";
            $.ajax(
                {
                    type: "post",
                    url: url,
                    data: {"provinceID": $('#s1').attr("value")},
                    success: function (data) {
                        var dataObj = eval("(" + data + ")");
                        for (var i = 0; i < dataObj.length; i++) {
                            $("#s2").append("<option value=" + dataObj[i].code + ">" + dataObj[i].name + "</option>");
                        }
                        if(null!= scity){
                            $('#s2').val([scity]).trigger('change');
                        }
//                        select3();
                    }, error: function (text) {
                }
                })
        };
        function select3() {
            var sregion = "${baseQueryEntity.sregion}";
            $("#s3").html("");
            var url = "${ctx}/base/query/select3";
            $.ajax(
                {
                    type: "post",
                    url: url,
                    data: {"cityID": $('#s2').attr("value")},
                    success: function (data) {
                        var dataObj = eval("(" + data + ")");
                        for (var i = 0; i < dataObj.length; i++) {
                            $("#s3").append("<option value=" + dataObj[i].code + ">" + dataObj[i].name + "</option>");
                        }
                        if(null!= sregion){
                            $('#s3').val([sregion]).trigger('change');
                        }
                    }, error: function (text) {
                }
                })
        };

b.后台

  /**
     * 省份查询，三级联动
     * @return
     */
    @RequestMapping(value = "select1")
    @ResponseBody
    public String select1() {
        String sql = "select * from t_bd_province where is_deleted =1";

        List<Map<String, Object>> objectList = baseQueryService.objectList(sql);
            List<Province> provinces = new LinkedList<Province>();
            Province province = null;

            for(Map<String,Object> map : objectList){
                province = new Province();
                province.setCode((String) map.get("code"));
                province.setName((String) map.get("name"));
                provinces.add(province);
            }
            return JSONObject.toJSONString(provinces);
    }

    /**
     * 地级市查询-三级联动
     * @param provinceID
     * @return
     */
    @RequestMapping(value = "select2")
    @ResponseBody
    public String  select2 (String  provinceID ) {
        String sql = "select * from t_bd_city where is_deleted =1 and province_code = " + provinceID;

        List<Map<String, Object>> objectList = baseQueryService.objectList(sql);
        List<City> cities = new LinkedList<City>();
        City city = null;

        for(Map<String,Object> map : objectList){
            city = new City();
            city.setCode((String) map.get("code"));
            city.setName((String) map.get("name"));
            cities.add(city);
        }
        return JSONObject.toJSONString(cities);
    }

    /**
     * 区县查询-三级联动
     * @param cityID
     * @return
     */
    @RequestMapping(value = "select3")
    @ResponseBody
    public String select3(String cityID) {
        String sql = "select * from t_bd_region where is_deleted =1 and city_code = " + cityID;

        List<Map<String, Object>> objectList = baseQueryService.objectList(sql);
        List<Region> regions = new LinkedList<Region>();
        Region region = null;

        for(Map<String,Object> map : objectList){
            region = new Region();
            region.setCode((String) map.get("code"));
            region.setName((String) map.get("name"));
            regions.add(region);
        }
        return JSONObject.toJSONString(regions);
    }

二，实现form提交后，页面刷新后台直接返回Model的情况下，给三级联动赋值，当然上面的代码已经是实现了的，我只是来点一下