<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
星球：
<select @change="changeXq" v-model="xqVal">
<option :value="item" v-for="item in xqArr">{{item}}</option>
</select>
什么洲：
<select>
<option :value="item" v-for="item in zhouArr">{{item}}</option>
</select>
</div>
<script src="./jquery-1.12.4.js"></script>
<script src="./vue2.6.14.js"></script>
<script>
/* 关闭生产提示 */
Vue.config.productionTip = false
new Vue({
el: "#app",
created(){
this.getXq();
},
data(){
return {
xqArr:[],
xqVal:"",
zhouArr:[],
}
},
methods: {
getXq: function () {
new Promise(function (resolve, reject) {
$.ajax({
url: "./xq.json",
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
})
})
.then(res => {
this.xqArr = res.xqArr;
})
},
changeXq(){
console.log(this.xqVal);
if(this.xqVal=="地球"){
new Promise(function (resolve,reject){
$.ajax({
url: "./dqzhou.json",
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
})
})
.then(res=>{
this.zhouArr = res.dqzhou;
})
}
if(this.xqVal=="月球"){
new Promise(function (resolve,reject){
$.ajax({
url: "./yqzhou.json",
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
})
})
.then(res=>{
this.zhouArr = res.yqzhou;
})
}
}
},
})
</script>
</body>
</html>
