客户端
首先引入vue+Ajax
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<label for="pwd">公司地址:</label>
<select name="" id="" style="width: 150px" @change="getqu()" v-model="quid">
<option :value="item.id" v-for="item in city">@{{ item.name }}</option>
</select>
<select name="" id="" style="width: 150px" @change="getxian()" v-model="xianid">
<option :value="item.id" v-for="item in qu">@{{ item.name }}</option>
</select>
<select name="" id="" style="width: 150px" >
<option :value="item.id" v-for="item in zhen">@{{ item.name }}</option>
</select>
Vue
<script>
new Vue({
el:'#container',
data:{
city:null,
qu:'',
zhen:'',
quid:'',
xianid:''
},
mounted () {
axios
.get("{{url('getCity')}}")
.then(response => (this.city = response.data.data))
.catch(function (error) { // 请求失败处理
console.log(error);
});
},
methods:{
getqu () {
// console.log(this.quid);
axios
.get("{{url('getQu')}}?id="+this.quid)
.then(response => (this.qu = response.data.data))
.catch(function (error) { // 请求失败处理
console.log(error);
});
},
getxian(){
axios
.get("{{url('getQu')}}?id="+this.xianid)
.then(response => (this.zhen = response.data.data))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
})
</script>
服务端
public function getCity(){
$data = City::where('pid',0)->get()->toArray();
return ['code'=>200,'msg'=>'seccess','data'=>$data];
}
public function getQu(Request $request)
{
$data = City::where('pid',$request->get('id'))->get()->toArray();
return ['code'=>200,'msg'=>'seccess','data'=>$data];
}