layui 四级联动（省、市、区、小区） 链接数据库版本带后台、图片上传

html代码：

<div class="layui-form-item">
    <label class="layui-form-label">联系地址</label>
    <div class="layui-input-block">
        <div class="fl mr10" style="width:170px;">
            <select name="provinceid" lay-verify="required" lay-filter="state">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="fl mr10" style="width:170px;">
            <select name="townid" lay-verify="required" lay-filter="state">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="fl" style="width:170px;">
            <select name="countyid" lay-verify="required" lay-filter="state">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block" id="szxq">
        <select name="villageId" lay-verify="required" lay-filter="state">
            <option value="" placeholder="请选择您所在的小区、大厦或学校"></option>
        </select>
    </div>
</div>

js:

layui.use('form', function () {
    var urls;
    //如果有需要到镇的改改就可以实现
    var form = layui.form(),
        $ = layui.jquery;
    var url = '${ctx}/front/getArea'; //省市区请求地址
    var urlVillage = '${ctx}/front/getVillage'; //小区请求地址
    var province = "河南省"; //编辑需要的省
    var city = "郑州市"; //编辑需要的市
    var district = "高新区"; //编辑需要的县/区
    getJSON(url + "?parentId=0", $("select[name='provinceid']").closest("div"));
    form.on('select(state)', function (data) {
        console.log(data);
        //如果选中的是区县
        if (data.elem.name == "countyid") {
            urls = urlVillage + "?addrareaId=" + data.value;
            getJSON(urls, $("#szxq"), '0');
        } else {
            //选取城市的话 根据城市名称定位到当前城市
            if (data.elem.name == "townid") {
                theLocation(data.elem[data.elem.selectedIndex].text);
            }
            urls = url + "?parentId=" + data.value;
            getJSON(urls, $(data.elem).closest("div").next(), '1');
        }
    });

    function getJSON(urls, even, flag) {
        $.getJSON(urls, function (json) {
            var pid = 0;
            var name = even.find("select").attr("name");
            var select = "<select name=\"" + name + "\" lay-filter=\"state\">";
            select += "<option value=\"\">请选择 </option>";
            $(json).each(function () {
                select += "<option value=\"" + this.id + "\"";
                if (province == this.value || city == this.value || district == this.value) {
                    select += " selected=\"selected\" ";
                    pid = this.id;
                }
                if (flag == "0") {
                    select += ">" + this.villagename + "</option>";
                } else {
                    select += ">" + this.name + "</option>";
                }
            });
            select += "</select>";
            even.html(select);
            var nextName = even.next().find("select").attr("name");
            even.next().html("<select name=\"" + nextName + "\" lay-filter=\"state\"><option value=\"\">请选择 </option></select>");
            form.render('select');
            if (pid != 0) {
                getJSON(url + "?parentId=" + pid, even.next());
            }
        });
    }

    //监听提交
    form.on('submit(wanshanInfo)', function (data) {

        var flag=true;

        $('input:checkbox[name="jxjd"]:checked').each(function()
        {
            if($(this).attr("title")=="小学"){
                var len = $('#tr_0 input:checkbox[name="jxkm"]:checked').length;
                if(len==0){
                 alert("请选择小学科目");
                    flag= false;
                }
            }else if($(this).attr("title")=="初中"){

                var len = $('#tr_1 input:checkbox[name="jxkm"]:checked').length;
                if(len==0){
                    alert("请选择初中科目");
                    flag= false;
                }
            }else{
                var len = $('#tr_2 input:checkbox[name="jxkm"]:checked').length;
                if(len==0){
                    alert("请选择高中科目");
                    flag= false;
                }
            }
        });
        return flag;

    });
    //监听教学阶段的checkbox
    form.on('checkbox(jiaoxuejieduan)', function (data) {
        if ($("#xfkemu").css("display") == 'none') {
            $("#xfkemu").css("display", 'block');
        }
        //如果选中
        if (data.elem.checked) {
            if (data.elem.title == "小学") {
                if ($("#tr_0").css("display") == 'none') {
                    $("#tr_0").css("display", 'block');
                }
            } else if (data.elem.title == "初中") {
                if ($("#tr_1").css("display") == 'none') {
                    $("#tr_1").css("display", 'block');
                }
            } else {
                if ($("#tr_2").css("display") == 'none') {
                    $("#tr_2").css("display", 'block');
                }
            }
        } else {
            if (data.elem.title == "小学") {
                if ($("#tr_0").css("display") == 'block') {
                    $("#tr_0").css("display", 'none');
                }
            } else if (data.elem.title == "初中") {
                if ($("#tr_1").css("display") == 'block') {
                    $("#tr_1").css("display", 'none');
                }
            } else {
                if ($("#tr_2").css("display") == 'block') {
                    $("#tr_2").css("display", 'none');
                }
            }
        }
    });

    //监听科目的checkbox
    form.on('checkbox(kemuInput)', function (data) {
        //教学类别
        var jxjd = $(data.elem).parent().parent().children("td").eq(0).text();
        //选中的科目
        var checkedKm = data.elem.title;
        //拼接科目
        var newstr = jxjd + "-" + checkedKm + ",";
        //如果选中的话追加 取消选中的话 删除掉
        var textValue = $("#jxkmTextarea").val();
        if (data.elem.checked) {
            $("#jxkmTextarea").val(textValue + newstr);
        } else {
            if (textValue.indexOf(newstr) >= 0) {
                var qihuanhou = textValue.replace(new RegExp(newstr), "");
                $("#jxkmTextarea").val(qihuanhou);
            }
        }
    });

    //监听机构类型的radio
    form.on('radio(jigouleixing)', function (data) {
        var title = data.elem.title;
        if (title == "个人") {
            $("#zhngjianleixing").css("display", 'block');
            $("#shouczhjzhao").css("display", 'block');
            $("#zhengjzzhengm").css("display", 'block');
            $("#frdbxm").css("display", 'none');
            $("#yyzzzch").css("display", 'none');
            $("#yyzzzp").css("display", 'none');
            $("#legalname").removeAttr("lay-verify");
            $("#businesslicenseno").removeAttr("lay-verify");
            form.render();
        } else {
            $("#zhngjianleixing").css("display", 'none');
            $("#shouczhjzhao").css("display", 'none');
            $("#zhengjzzhengm").css("display", 'none');
            $("#frdbxm").css("display", 'block');
            $("#yyzzzch").css("display", 'block');
            $("#yyzzzp").css("display", 'block');
            $("#legalname").attr("lay-verify", 'required');
            $("#businesslicenseno").attr("lay-verify", 'required');
            form.render();
        }
    });

});

//图片上传
layui.use('upload', function () {
    //上传头像
    layui.upload({
        url: '${ctx}/front/fileUpload'
        , elem: '#touxiang' //指定原始元素，默认直接查找class="layui-upload-file"
        , success: function (res) {
            LAY_demo_upload.src = res.fileUrl;
            $("#photopath").val(res.fileUrl);
        }
    });
    //上传手持证件照
    layui.upload({
        url: '${ctx}/front/fileUpload'
        , elem: '#sczjzInput' //指定原始元素，默认直接查找class="layui-upload-file"
        , success: function (res) {
            sczjz.src = res.fileUrl;
            $("#handcardpath").val(res.fileUrl);
        }
    });
    //上传证件照正面
    layui.upload({
        url: '${ctx}/front/fileUpload'
        , elem: '#zjzzmInput' //指定原始元素，默认直接查找class="layui-upload-file"
        , success: function (res) {
            zjzzm.src = res.fileUrl;
            $("#cardpath").val(res.fileUrl);
        }
    });
    //上传营业执照照片
    layui.upload({
        url: '${ctx}/front/fileUpload'
        , elem: '#yyzzzpInput' //指定原始元素，默认直接查找class="layui-upload-file"
        , success: function (res) {
            yyzzzpDiv.src = res.fileUrl;
            $("#businesslicensepath").val(res.fileUrl);
        }
    });
});

java后台：

@ResponseBody
@RequestMapping(value="getArea", method={RequestMethod.POST,RequestMethod.GET})
public List<Area> changeArea(HttpServletRequest request, @RequestParam String parentId){
   List<Area> allList = areaService.findAll();
   List<Area> cityList = new ArrayList<Area>();
   for(Area area : allList){
      if(parentId.equals(area.getParentId())){
         cityList.add(area);
      }
   }
   return cityList;
}


/**
 * 根据查询条件搜索对应的小区
 * @param request
 * @param chaVillage
 * @return JSON
 */
@ResponseBody
@RequestMapping(value="getVillage", method={RequestMethod.POST,RequestMethod.GET})
public List<ChaVillage> getVillage(HttpServletRequest request, ChaVillage chaVillage){
   List<ChaVillage> allList = chaVillageService.findList(chaVillage);
   return allList;
}

上传文件对应的controller

/*
 * 采用file.Transto 来保存上传的文件
 */
@RequestMapping("fileUpload")
@ResponseBody
public  Map<String, Object>  fileUpload2(@RequestParam(value = "file", required = false) CommonsMultipartFile file, HttpServletRequest request) throws IOException {
    Map<String, Object> map = new HashMap<>();
    String path = request.getSession().getServletContext().getRealPath("/frontUpload");
    String orginalName = file.getOriginalFilename();
    String fileName = new Date().getTime()+"-"+orginalName;
    File targetFile = new File(path, fileName);
    if (!targetFile.exists()) {
        targetFile.mkdirs();
    }
    //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
    file.transferTo(targetFile);
    map.put("fileUrl", "/frontUpload/" + fileName);
    return map;
}