<!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>
<script src="./js/jquery-1.12.4.js"></script>
<script src="./vue2.6.14.js"></script>
</head>
<body>
<div id="app">
星球：
<select @change="changeXq" v-model="xqVal">
<option :value="item" v-for="(item,index) in xqArr">{{item}}</option>
</select> 什么洲：
<select>
<option :value="item" v-for="(item,index) in zhouArr">{{item}}</option>
</select>
</div>
<script>
Vue.config.productinoTip = 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;
})
} else 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>
xq.json文件内容
{
"xqArr": ["地球", "月球"]
}
dqzhou.json文件内容
{
"dqzhou": ["亚洲", "非洲", "美洲"]
}
yqzhou.json内容
{
"yqzhou": ["陨石", "嫦娥", "玉兔"]
}
