学习layui之省市县三级联动

三级联动前端js代码
var isFirstOnload= true;   //layui存在在页面加载完之前就渲染select控件的原因，当我们在页面加载完毕，用avalon绑定数据的时候
                              //数据并不能绑定到对应控件，我们设一个全局变量，当第一次加载页面的时候，对这些控件赋初始值

$(function() {
    if (sStudentId!= null && sStudentId != ""&&sStudentId != undefined&& sStudentId!= "null") {
        var sData= {
            "token" : sToken,
            "student_id" : sStudentId
        };
        $.ajax({
            type : "post",
            url: myRootUrl+ "/studentMgmt/queryStudentById.do",
            dataType:"json",
            contentType: "application/json",
            data: JSON.stringify(sData),
            async: false,
            success: function(data) {
                console.log(data);
                var student=data.data;
                vm.student_id=student.studentId;
                vm.student_code=student.studentCode?student.studentCode:"";
                vm.student_name=student.studentName?student.studentName:"";
                vm.student_gender=student.studentGender==1?"男":"女";
                vm.student_brithday=student.studentBrithday?newDate(student.studentBrithday).Format('yyyy-MM-dd'):"";
                vm.class_code=student.classCode?student.classCode:"";
                vm.student_card=student.studentCard?student.studentCard:"";
                vm.entrance_time=student.entranceTime?newDate(student.entranceTime).Format('yyyy-MM-dd'):"";
                vm.student_tel=student.studentTel?student.studentTel:"";
                vm.student_mobile=student.studentMobile?student.studentMobile:"";
                vm.student_address=student.studentAddress?student.studentAddress:"";
                vm.enroll_state=student.enrollState?student.enrollState:"";
                vm.card_type_name=student.cardTypeName?student.cardTypeName:"";
                vm.education_name=student.educationName?student.educationName:"";
                vm.nation_name=student.nationName? student.nationName:"";
                vm.political_status_name=student.politicalStatusName? student.politicalStatusName : "";
                vm.employed_state=student.employedState? student.employedState : "";
                vm.post=student.post? student.post:  "";
                vm.province_code=student.provinceCode? student.provinceCode:"";
                vm.graduation_school=student.graduationSchool? student.graduationSchool :"";
                vm.diploma_level=student.diplomaLevel? student.diplomaLevel : "";
                vm.diploma_type=student.diplomaType? student.diplomaType :"";
                vm.graduation_time=student.graduationTime?newDate(student.graduationTime).Format('yyyy-MM-dd'):"";
                vm.diploma_no=student.diplomaNo? student.diplomaNo :"";
                vm.city_code = student.cityCode ? student.cityCode:"";
                vm.county_code=student.countyCode? student.countyCode:"";
            }
        })
    }
    loadProvince();
});

layui.use(['form','laydate'],function(){
    var form=layui.form();
    var laydate=layui.laydate;

    //自定义验证规则
    form.verify({
        length: function(value){
            if(value.length> 10){
                return '内容过多';
            }
        }
    });
    //监听提交
    form.on('submit(formContact)',function(data){
        // layer.msg(JSON.stringify(data.field));
        // var formModel = data.field;

        vm.student_gender= data.field.student_gender;
        vm.employed_state= data.field.employed_state;
        vm.province_code= data.field.province_code;
        vm.city_code= data.field.city_code;
        vm.county_code= data.field.county_code;
        vm.type= "contact";
        doOK();
    });

    form.on('submit(formBeforeLearn)',function(data){
        // layer.msg(JSON.stringify(data.field));
        // var formModel = data.field;

        vm.diploma_level= data.field.diploma_level;
        vm.diploma_type= data.field.diploma_type;
        vm.type= "learn";
        doOK();
    });

    // form.render('select');
    form.on('select(province_code)',function(data){//监听下拉选
        loadCity();
        form.render('select');         //渲染下拉选
    })
    form.on('select(city_code)',function(data){
        loadCounty();
        form.render('select');
    })
});



//实现省市县三级联动方法在layui中需要加入监听事件和加载完后的重新渲染
function loadProvince(){
    var  preantId=0;
    $.ajax({
        type: "post",
        url: myRootUrl+ "/placeMgmt/loadPlace.do",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
                "token" : sToken,
                "place_id":preantId

        }),
        async: false,
        success: function(data) {
            $("#province_code").append("<optionvalue=''></option>");
            for(vari = 0; i < data.data.length; i++){
               $("#province_code").append("<option value='"+data.data[i].placeId+"'>"+data.data[i].name+"</option>");
           }


            loadCity();
        }
    })

}

function loadCity(){
    if(isFirstOnload){                   //判断是不是第一次加载，如果是第一次加载，将控件赋初始值
        $("#province_code").val(vm.province_code);
    }

    var provinceId=$("#province_code").val();
    $("#city_code").children("option").remove();

    $.ajax({
        type: "post",
        url: myRootUrl+ "/placeMgmt/loadPlace.do",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            "token" : sToken,
            "place_id":provinceId

        }),
        async: false,
        success: function(data) {
            $("#city_code").append("<option value=''></option>");
            for(vari = 0; i < data.data.length; i++){
                $("#city_code").append("<option value='"+data.data[i].placeId+"'>"+data.data[i].name+"</option>");
            }
            loadCounty();
        }
    })
}

function loadCounty(){
    $("#county_code").children("option").remove();
    if(isFirstOnload){
        $("#city_code").val(vm.city_code);
    }


    var cityId=$("#city_code").val();
    $.ajax({
        type: "post",
        url: myRootUrl+ "/placeMgmt/loadPlace.do",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            "token" : sToken,
            "place_id":cityId

        }),
        async: false,
        success: function(data) {

            $("#county_code").append("<optionvalue=''></option>");
            for(vari = 0; i < data.data.length; i++){
                $("#county_code").append("<option value='"+data.data[i].placeId+"'>"+data.data[i].name+"</option>");
            }

        }
    })
    if(isFirstOnload){
        $("#county_code").val(vm.county_code);
    }
    isFirstOnload = false;
}

三级联动html

<div class="layui-form-item">
    <label class="layui-form-label">地区（市）：</label>
    <div class="layui-input-inline">
        <select name="city_code" id="city_code"  ms-duplex="@city_code" lay-filter="city_code">
        </select>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">市（县）：</label>
    <div class="layui-input-inline">
        <select name="county_code" id="county_code"  ms-duplex="@county_code" lay-filter="county_code">
        </select>
    </div>
</div>

 

 

三级联动后台java

 

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializerFeature;
import com.dawn.bgSys.common.WebJsonUtils;
import com.dawn.bgSys.service.IPlaceService;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

 

 

@RequestMapping(value = "/loadPlace",produces = "application/json;charset=UTF-8")
@ResponseBody
public String loadPlace(@RequestBody String jsonStr) throws Exception {

    String placeId = WebJsonUtils.getStringValue(jsonStr, "place_id", false);

    JSONObject jsonObject = this.placeService.queryPlaceByParentId(placeId);
    System.out.println(jsonObject);
    JSONObject json = new JSONObject();
    json.put("data",jsonObject.getJSONArray("data"));

    String str = JSONObject.toJSONString(json, SerializerFeature.WriteMapNullValue);
    return str;
}