三级联动基于vue和layui

最新推荐文章于 2024-08-08 07:59:50 发布

forever_chm

最新推荐文章于 2024-08-08 07:59:50 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/forever_chm/article/details/80931797

版权

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@ include file="../../common/head.jsp" %>
    <script type="text/javascript" src="${webRoot}/static/layuiadmin/layui/layui.all.js"></script>
    <script type="text/javascript" src="${webRoot}/static/js/admin.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-tab layui-tab-brief">
            <form class="layui-form" style="margin-top: 10px" id="app">
                <div class="layui-form-item">
                    <label class="layui-form-label">省</label>
                    <div class="layui-input-inline" >
                        <select name="regionId" lay-filter="selectPro" lay-verify="required"  >
                            <option value="">请选择省</option>
                            <option v-for="pro in proList" :value="pro.regionId">{{pro.regionName}}</option>
                        </select>
                    </div>
                    <font color="red">*</font>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">市</label>
                    <div class="layui-inline" >
                        <select name="classId" lay-verify="required" lay-filter="selectCity">
                            <option value="">请选择市</option>
                            <option  v-for="city in cityList" :value="city.regionId">{{city.regionName}}</option>
                        </select>
                    </div>
                    <font color="red">*</font>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">区</label>
                    <div class="layui-inline" >
                        <select name="classId" lay-verify="required" >
                            <option value="">请选择区</option>
                            <option  v-for="dd in districtList" :value="dd.regionId">{{dd.regionName}}</option>
                        </select>
                    </div>
                    <font color="red">*</font>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"></label>
                        <button class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            proList:[],
            cityList:[],
            districtList:[]
        }, created: function () {
            $.post("${webRoot}/schoolAdmin/classHeader/selectPro", function (res) {
                app.proList = res;
            })
        },updated:function () {
            form.render();
        }
    });
    //监听选择框年级是否发生变化 ，班级要随年级的变化儿变化
    form.on('select(selectPro)', function(data){
        if (data==null){
            app.cityList=[];
            app.districtList=[];
            return false;
        }
        $.post("${webRoot}/schoolAdmin/classHeader/selectCityByProId",{'proId':data.elem.value}, function (res) {
            app.districtList=[];
            if (res==null){
                app.districtList=[];
                return false;
            }
            app.cityList = res;
        });
    });
    form.on('select(selectCity)', function(data){
        $.post("${webRoot}/schoolAdmin/classHeader/selectUByCityId",{'cityId':data.elem.value}, function (res) {
            app.districtList = res;
        });
    });

</script>
</html>

@RequestMapping(value = "/selectPro",method = RequestMethod.POST)
    @ResponseBody
    public List<JxjlRegion> selectPro( HttpServletRequest request) throws CustomException {
        return  classHeaderService.selectPro();
    }
    @RequestMapping(value = "/selectCityByProId",method = RequestMethod.POST)
    @ResponseBody
    public List<JxjlRegion> selectCityByProId(int proId, HttpServletRequest request) throws CustomException {
        return  classHeaderService.selectCityByProId(proId);
    }
    @RequestMapping(value = "/selectUByCityId",method = RequestMethod.POST)
    @ResponseBody
    public List<JxjlRegion> selectUByProId(int cityId, HttpServletRequest request) throws CustomException {
        return  classHeaderService.selectUByProId(cityId);
    }