简单三级联动，下拉框

下拉框的三级联动

本代码用的是 年级–>班级–>学生 外键判断，没有用表连接
sql语句：@Query(value=“select * from vclaname where cid=?1”,nativeQuery=true)

Html：

<div id="app">
	**change是更改事件**
	<!-- 一级 -->
	<select v-on:change="Ld2()" id="a1">
		<option value="0" >---请选择---</option>
		<option v-for="arr in arrin" :value="arr.gid">{{arr.gname}}</option>
	</select>
	<!-- 二级 -->
	<select v-on:change="Ld3()" id="a2">
		<option value="0">---请选择---</option>
		<option v-for="zrr in zrrin" :value="zrr.cid">{{zrr.cname}}</option>
	</select>
	<!-- 三级 -->
	<select>
		<option value="0">---请选择---</option>
		<option v-for="xrr in xrrin">{{xrr.vname}}</option>
	</select>
</div>

Vue+Jq:

<script>
	var vm=new Vue({
		//限定操作空间
		el:"#app",
		//参数  分别是
		data:{
			//年级数组
			arrin:[],
			//班级数组
			zrrin:[],
			//学生数组
			xrrin:[],
		},
		mounted(){
			//页面加载完成后，调用显示年级下拉
			this.check();
		},
		methods:{
			//利用jaxa给年级数组赋值
			check:function(){
				$.post("/ld/2all",{},function(data){
					var len=data.length;
					for(var i=0;i<len;i++){
						vm.arrin.push(data[i]);
					}
				})
			},
			//当年级改变 班级下拉也改变
			Ld2:function(){
					//赋值前先清空，防止数据叠加
					vm.zrrin=[];
					$.post("/ld/ld2",{x:$("#a1").val()},function(data){
						var len=data.length;
						for(var i=0;i<len;i++){
							vm.zrrin.push(data[i]);
						}
					})
			},
			//当班级改变 学生下拉也改变
			Ld3:function(){
					vm.xrrin=[];
					$.post("/ld/ld3",{x:$("#a2").val()},function(data){
						var len=data.length;
						for(var i=0;i<len;i++){
							vm.xrrin.push(data[i]);
						}
					})				
			},
		}
	})
</script>

控制器：

//二级
	@RequestMapping("ld2")
	@ResponseBody
	public List<LianDong> findListAll(HttpServletRequest req){
		//接收参数
		int x=Integer.parseInt(req.getParameter("x"));
		return ldService.findListAll(x);
	}
	//三级
	@RequestMapping("ld3")
	@ResponseBody
	public List<LianDong3> findListAll3(HttpServletRequest req){
		int x=Integer.parseInt(req.getParameter("x"));
		return ld3Service.findListAll(x);
	}