<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/form-seialize.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/vue.js"></script>
<!-- <script src="/static/js/demo.js"></script> -->
</head>
<body>
<style>
select {
margin-top: 10px;
width: 150px;
}
</style>
<div id="app">
<div>
省份:
<select v-model="obj.provinceId">
<option :value="item" id="p" v-for="(item, idx) in provinceList">{{item}}</option>
</select>
城市:
<select v-model="obj.cityId">
<option :value="item" id="c" v-for="(item, idx) in cityList">{{item}}</option>
</select>
地区:
<select v-model="obj.areaId">
<option :value="item" id="a" v-for="(item, idx) in areaList">{{item}}</option>
</select>
</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
obj: {
areaId: "",
cityId: "",
provinceId: ""
},
provinceList: [],
cityList: [],
areaList: [],
},
async created() {
try {
const p = await axios({ url: 'https://hmajax.itheima.net/api/province' });
const pname = p.data.list[0];
this.provinceList = p.data.list;
const c = await axios({
url: 'https://hmajax.itheima.net/api/city', params: { pname }
});
const cname = c.data.list[0];
this.cityList = c.data.list;
const a = await axios({
url: 'https://hmajax.itheima.net/api/area', params: { pname, cname }
});
const aname = a.data.list[0];
this.areaList = a.data.list;
} catch (error) {
// console.dir(error);
}
},
watch: {
obj: {
deep: true,
immediate: false,
handler(newValue) {
const pname = newValue.provinceId
if (pname != '') {
axios({
url: 'https://hmajax.itheima.net/api/city', params: { pname }
}).then(res => {
this.cityList = res.data.list;
});
}
const cname = newValue.cityId
if (cname != '') {
axios({
url: 'https://hmajax.itheima.net/api/area', params: { pname, cname }
}).then(res => {
this.areaList = res.data.list;
});
}
}
},
},
});
</script>
</body>
</html>