vue select 下拉框 联动
(1)三个下拉框,第二个和第三个都需要第一个下拉框的数据id才能通过接口请求到数据(2)遇到的问题,二、三下拉框的数据更新不同步(3)鼠标点击二次才能将下拉框弹出部门请选择部门{{ item.group_name }}职位
·
(1)三个下拉框,第二个和第三个都需要第一个下拉框的数据id才能通过接口请求到数据
(2)遇到的问题,二、三下拉框的数据更新不同步
(3)鼠标点击二次才能将下拉框弹出
<template>
<ul class="h45">
<li class="left" >
<p class="left text-right w100 fc-4 mt10">部门</p>
<p class="row-box">
<select id="workergroupid" v-on:change="choosegroup($event.target)" class="form-control w200">
<option value="">请选择部门</option>
<option v-for="item in grouplist" v-bind:value="item.group_id">{{ item.group_name }}</option>
</select>
</p>
</li>
<li class="left">
<p class="left text-right w100 fc-4 mt10">职位</p>
<p class="row-box">
<select id="workerroleid" name="workerroleida" class="form-control w200" >
<option>请选择职位</option>
<option v-for="roleitem in rolelist" v-bind:value="roleitem.role_id">{{roleitem.role_name}}</option>
</select>
</p>
</li>
<li class="left">
<p class="left text-right w100 fc-4 mt10">上级</p>
<p class="row-box">
<select id="workerpidid" name="workerroleidb" class="form-control w200">
<option>请选择上级</option>
<option v-for="piditem in pidlist" v-bind:value="piditem.worker_id">{{piditem.role_name}}-{{piditem.worker_name}}</option>
</select>
</p>
</li>
</ul></template>
<script>
export default {
data (){
return{
groupid:"",
grouplist:[],
pidlist:[],
rolelist:[]
}
},
mounted:function(){
this.getgrouplist()
},
methods:{
getgrouplist(){
var sendData = {};
var jsonData = {};
sendData.url ="www.baidu.com";
jsonData.token = "1111111111111111";
jsonData.phone = "111111111111";
sendData.data = jsonData;
$.ajax({
url:"http://www.baidu.com/abc.php",
data:sendData,
dataType:"Json",
success:function(re){
this.grouplist=re.data;
}.bind(this)
});
},
choosegroup(obj){
var that=this;
this.groupid=obj.value;
/*this.$options.methods.chooserole(this.groupid);
this.$options.methods.choosepid(this.groupid);*/
//this.$options.methods.choosepid(this.groupid);
//console.log(this.pidlist);
var sendData = {};
var jsonData = {};
sendData.url ="www.baidu.com";
jsonData.token = "1111111111111111";
jsonData.phone = "111111111111";
jsonData.group_id=this.groupid;
sendData.data = jsonData;
$.ajax({
url:"http://www.baidu.com/abc.php",
data:sendData,
dataType:"Json",
success:function(re){
if(re.status==1){
var abc=re.data;
for(var $i=0;$i<abc.length;$i++){
that.rolelist.push(abc[$i]);
}
}else{
layer.msg(re.msg);
}
}
});
if(obj.value){
var vm=this;
var sendData = {};
var jsonData = {};
sendData.url ="www.baidu.com";
jsonData.token = "1111111111111111";
jsonData.phone = "111111111111";
jsonData.group_id=this.groupid;
sendData.data = jsonData;
$.ajax({
url:"http://www.baidu.com/abc.php",
data:sendData,
dataType:"Json",
success:function(re){
if(re.status==1){
var abc=re.data;
for(var $i=0;$i<abc.length;$i++){
vm.pidlist.push(abc[$i]);
}
}else{
layer.msg(re.msg);
}
}
});
}else{
console.log("错误");
}
},
</script>
push 不是一个方法, 大部分情况是 this的指向问题
更多推荐
已为社区贡献1条内容
所有评论(0)