easyui commobox省市区县三级联动

1.前端代码
<div class="col-6 f-group">

                <label class="col-4 left_red">

                    省名称

                </label>

                <div class="col-8">

                    <input type="text" id="province" name="province"

                           readonly hidden="hidden"/>

                    <input type="text" id="province_name" panelHeight="100" name="province_name"

                           dataType="Require"

                           msg="省名称不能为空"/>

                </div>

            </div>

            <div class="col-6 f-group">

                <label class="col-4 left_red">

                    市名称

                </label>

                <div class="col-8">

                    <input type="text" id="city_code" name="city_code"

                           readonly hidden="hidden"/>

                    <input type="text" id="city_name" panelHeight="100" name="city_name"

                           dataType="Require"

                           msg="市名称不能为空"/>

                </div>

            </div>

            <div class="col-6 f-group">

                <label class="col-4 left_red">

                    区县名称

                </label>

                <div class="col-8">

                    <input type="text" id="county_code" name="county_code"

                           readonly hidden="hidden"/>

                    <input type="text" id="county_name" panelHeight="100" name="county_name" dataType="Require"

                           msg="区县名称不能为空"/>

                </div>

            </div>


2.javascript代码
/**easyui省市区县三级联动开始**/

    /**省级**/

    $(function () {

        $("#province_name").combobox({

            valueField: 'name',//值字段

            url: "${base}/baseinfo/district/getAllProvince?region=province",

            textField: 'name',//显示字段

            method: 'POST',

            editable: false,//不可编辑只能选择

            value: '  请选择  ',

            onSelect: function (obj) {

                $("#city_name").combobox("setValue", '  请选择  ');//清除市列表

                $("#county_name").combobox("setValue", '');//清除区县列表

                $("#city_code").val('');//清除市编码

                $("#county_code").val('');//清除区县编码

                $('#province').val(obj.code);

                $('#city_name').combobox('reload', "${base}/baseinfo/district/getAllCity?region=city&&id=" + obj.id);

            }

        });

        /**市级**/

        $("#city_name").combobox({

            valueField: 'name',//值字段

            textField: 'name',//显示字段

            editable: false,//不可编辑只能选择

            value: ' ',

            onSelect: function (obj) {

                $("#county_name").combobox("setValue", '  请选择  ');//清除区县列表

                $("#county_code").val('');//清除区县编码

                $('#city_code').val(obj.code);

                //$('#city').combobox('clear');

                $('#county_name').combobox('reload', "${base}/baseinfo/district/getAllCounty?region=county&&id=" + obj.id);

            }

        });

        //生成随机数

        function RndNum(n) {

            var rnd = "";

            for (var i = 0; i < n; i++)

                rnd += Math.floor(Math.random() * 10);

            return rnd;

        }

        /**区县级**/

        $("#county_name").combobox({

            valueField: 'name',//值字段

            textField: 'name',//显示字段

            editable: false,//不可编辑只能选择

            value: ' ',

            onSelect: function (obj) {

                $('#county_code').val(obj.code);

                var x = obj.code + RndNum(2);

                $('#street_code').val(x);

                var y = x + RndNum(2);

                $('#community_code').val(y);

                $('#residentia_code').val(y + RndNum(2));

            }

        });

    });

    /**easyui省市区县三级联动结束**/


3.控制层代码
/**获得省级信息**/

@RequestMapping(value = "getAllProvince", method = RequestMethod.POST)

@ResponseBody

public List<DistrictDomain> getAllProvince(String region) throws Exception {

    DistrictDomain domain = new DistrictDomain();

    domain.setRegion(region);

    List<DistrictDomain> list=Collections.emptyList();

    list = districtService.query(domain);

    return  list;

}

/**获得市级信息**/

@RequestMapping(value = "getAllCity", method=RequestMethod.POST)

@ResponseBody

public List<DistrictDomain> getAllProvince(@Param("region") String region,@Param("id") Long id) throws Exception {

    DistrictDomain domain = new DistrictDomain();

    domain.setId(id);

    domain.setRegion(region);

    List<DistrictDomain> list=Collections.emptyList();

    list = districtService.query(domain);

    return  list;

}

/**获得区县信息**/

@RequestMapping(value = "getAllCounty", method=RequestMethod.POST)

@ResponseBody

public List<DistrictDomain> getAllCounty(@Param("region") String region,@Param("id") Long id) throws Exception {

    DistrictDomain domain = new DistrictDomain();

    domain.setId(id);

    domain.setRegion(region);

    List<DistrictDomain> list=Collections.emptyList();

    list = districtService.query(domain);

    return  list;

}
秒客网

easyui commobox省市区县三级联动

相关文章
