zoukankan      html  css  js  c++  java
  • 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;
    }
    
    
  • 相关阅读:
    【FIRST USE】第一次用git把代码上传到github
    [多线程学习笔记] 一个线程安全的队列
    C中宏展开问题
    C语言中的命名空间
    c语言中赋值语句的结果
    Python一些难以察觉的错误
    C语言中的内存压缩技术
    简述数据结构:二叉查找树
    指针与指针的引用、指针的指针
    C++ 中的virtual关键词
  • 原文地址:https://www.cnblogs.com/wanlipenghtml/p/9768495.html
Copyright © 2011-2022 走看看