用JQ+vue+select来实现两级联动

用JQ+vue来实现两级联动

1. 在这里我没有用到表连接，我只是用简单的方法完成了两级联动，希望对你们有帮助，这些代码仅供参考。
2. 两级联动就是两个表之间关联，我们都知道表的外键可以和另一个表的主键相连。
3. 这就是联动的关键所在，我们就可以用我们在HTML中的value值来进行联动。

年级表：

<div id="app">
	<select id="gid" name="gid"  v-on:change="fen()">
		<option value="0">---请选择---//option可以是单标签，也可以是双标签。
		<option v-for="grade in grades" v-model="grade.gname" :value="grade.gid" >{{grade.gname}}
	select>
div>

v-model, :value:是Vue中的方法,用来配合下面的jQuery使用。
v-on:change,这个方法相当于JavaScript中的onchang.意思为HTML改变事件
v-for=“grade in grades”，for是循环的意思，grade是自己随便起的名字，grades是自己定义的数组，{{grade.gname}}：用名字调用数组中的元素

班级表：

<div id="app">
	<select id="cid">
		<option value="0">---请选择---
		<option v-for="clae in claes" v-model="clae.cname" :value="clae.cid">{{clae.cname}}
	select>
div>

Vue+jQuery代码：

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"</script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			grades:[],//定义一个数组来接收查询出的键值对
			claes:[],
			gid:0//这是定义的select中的value（---请选择---）
		},
		mounted(){//待dom加载完后，自动执行
			this.check();
		},
		methods:{//自己定义的方法
			check:function(){//查询年级表
				$.post("/mess/findByAll",{},function(data){
					var len=data.length;//获取返回值data的长度
					for (var i = 0; i < len; i++) {
						vm.grades.push(data[i]);//把data中的元素追加到grades这个数组中
					}
				});
			},
			fen:function(){
				var gid=$("#gid").val();//获取年级表中的gid
				$.post("/mess/findData",{gid:gid},function(data){
					var len=data.length;
					vm.claes=[];//在每次循环前把这个数组清空，这样就会出现一组数据
					for (var i = 0; i < len; i++) {
						vm.claes.push(data[i]);
					}
				});
			},
		},
	});
</script>