用vue写 下拉框(select option)二级联动 ajax异步
首先 我的是从数据库 查询出来的班级表和级部表下面是效果图add.html级部:<selectv-on:change="change()" v-model="jjid"><option value="0">---请选择---</option><option v-for="ji in crr":value="ji.jid">{{...
·
首先 我的是从数据库 查询出来的班级表和级部表
下面是效果图
add.html
级部:<select v-on:change="change()" v-model="jjid">
<option value="0">---请选择---</option>
<option v-for="ji in crr":value="ji.jid">{{ji.jname}}</option>
</select><br>
班级:<select name="cid" v-model="ccid" >
<option value="0">---请选择---</option>
<option v-for="cla in brr":value="cla.cid">{{cla.cname}}</option>
</select><br>
js代码
var vm=new Vue({
el:"#app",//定位到某个标签区域 在form表单之外
data:{
one:'hello vue.js!',
ccid:"0",//学生表的外键
brr:[], //二级联动班级
jjid:"0",//班级表的外键
crr:[] //二级联动级部
},
mounted(){//待domcoument结构加载完毕 自动执行里面的方法
this.ji();
},
methods:{//自定义方法
ji:function(){
//查询级部的数据
$.post("/db/getji",{},function(data){
var len=data.length;
vm.crr=[];
for(var i=0;i<len;i++){
vm.crr.push(data[i]);//给数组填数据
}
})
},
change:function(){
var jjid=this.jjid;
//查询班级的数据
$.post("/db/getcla",{jjid:jjid},function(data){
var len=data.length;
vm.brr=[];//清空数据
for(var i=0;i<len;i++){
vm.brr.push(data[i]);
}
})
}
}
});
controller代码
//查询级部表全部数据
@RequestMapping("getji")
@ResponseBody
public List<Ji> getji() {
return jiService.findAll();
}
//查询数据
@RequestMapping("getcla")
@ResponseBody
public List<Cla> getcla(String jjid) {
return claService.findByJjid(jjid);
}
我是个很自律的人,既然我说了要写代码,那我就一直说。
更多推荐
已为社区贡献2条内容
所有评论(0)