Ruoyi 三级联动修改默认显示

StudentContrnller

/**
     * 修改公告
     */
    @GetMapping("/edit/{studentId}")
    public String edit(@PathVariable("studentId") Long studentId, ModelMap mmap)
    {
        mmap.put("student", studentService.selectStudentById(studentId));//通过id向前端传选中修改的student数据
        mmap.put("province", provinceService.selectProvinceList(new Province()));//向前端传所有省区数据

        //通过id进行判断取值
        int townId= studentService.selectStudentById(studentId).getTtid();//选取选中行student的外键赋给县区表的主键
        int cityId = townService.selectTownById(Long.parseLong(String.valueOf(townId))).getCcid();//获取县区表的外键赋给市区表的主键
        int provinceId = cityService.selectCityById(Long.parseLong(String.valueOf(cityId))).getPpid();//获取市区表的外键赋给省区表的主键

        //赋值让后端进行接收
        mmap.put("townId",townId);//向前端穿县区表主键
        mmap.put("cityId",cityId);//向前端穿市区表主键
        mmap.put("provinceId",provinceId);//向前端穿省区表主键
        mmap.put("city",cityService.selectCityById1(Long.parseLong(String.valueOf(provinceId))));//获取省份表主键作为市区表外键查询选中省下全部市区向前端传值
        mmap.put("town", townService.selectTownById1(Long.parseLong(String.valueOf(cityId))));//获取市区表主键作为县区表外键查询选中市区下全部县区向前端传值
        return prefix + "/edit";
    }

根据编号获取当前表信息方法框架自带 三个根据外键获取数据方法与主键获取方法类似只需在xml中把主键改成外键即可

修改页面
html显示部分

    <div class="form-group">
            <label class="col-sm-2 control-label is-required">省区：</label>
            <div class="col-sm-10">
                <select id="province"   class="form-control">
                    <option th:each="p:${province}" th:value="${p.pid}" th:text="${p.pname}" ></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">市区：</label>
            <div class="col-sm-10">
                <select id="city" class="form-control">
                    <option value="">请选择市区</option>
                    <option th:each="c:${city}" th:value="${c.cid}" th:text="${c.cname}" ></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">县区：</label>
            <div class="col-sm-10">
                <select id="town"  class="form-control">
                    <option value="">请选择县区</option>
                    <option th:each="t:${town}" th:value="${t.tid}" th:text="${t.tname}" ></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">//与后端数据绑定 浏览器在解析th:field的时候，会解析成name="${th:field}"
                <input id="ttid" name="ttid" th:field="*{ttid}" class="form-control" type="hidden" required>
            </div>
        </div>

js操作部分

  $(document).ready(function () {
        //获取controller层的函数，进行默认选中
        var pid = [[${provinceId}]];
        var cid = [[${cityId}]];
        var tid = [[${townId}]];
        $("#province").val(pid);
        $("#city").val(cid);
        $("#town").val(tid);

     $("#province").change(function () {
            var ppid = $("#province").val();
            $.post(ctx + "system/city/getCity/" + ppid, {}, function (result) {
                $("#city").html("<option value=''>-- 请选择市区 --</option>")//清空下拉框
                $("#town").html("<option value=''>-- 请选择县区 --</option>")
                for (var i = 0; i < result.length; i++) {
                    var option = $("<option></option>").text(result[i].cname);
                    option.attr("value", result[i].cid);
                    $("#city").append(option);
                }
            })
             /* 第二种方式 二选一即可
              $.ajax({
                url: ctx + "system/city/getCity/"+$("#province").val(),
                type: 'POST',
                success:function (data) {
                    $("#city").empty();//empty()方法是将标签option中的值置成空
                    $("#city").append("<option value=''>请选择市区</option>");//append()是往动态字符串数组添加
                    for (var i = 0; i < data.length; i++){
                        $("#city").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
                    }
                }
            });*/
        });


        $("#city").change(function () {
            var ccid = $("#city").val();
            $.post(ctx + "system/town/getTown/" + ccid, {}, function (result) {
                $("#town").empty();
                for (var i = 0; i < result.length; i++) {
                    var option = $("<option></option>").text(result[i].tname);
                    option.attr("value", result[i].tid);
                    $("#town").append(option);
                }
            })
               /*第二种方式 二选一即可
               $.ajax({
                url: ctx + "system/town/getTown",
                type: 'GET',
                data: {
                    classesGrade: $("#city").val(),
                },
                success:function (data) {
                    $("#town").empty();
                    $("#town").append("<option value=''>请选择县区</option>");
                    for (var i = 0; i < data.length; i++){
                        $("#town").append("<option value='" + data[i].tid + "'>" + data[i].tname + "</option>");
                    }
                }
            })*/
        });
        
        
        $("#town").change(function () {//赋值给input输入框添加到数据库
            $("#ttid").val($("#town").val());
        })
    })