<%@ 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);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
