省市区三级联动
注：
1.以下代码我把key值省略了，如需使用到网站申请即可。
2.Ajax封装的函数见我第三天写的博客，链接在这(https://blog.csdn.net/qq_43709292/article/details/104137293)。
3.最开始怎么试都不行，发现有一个跨域的问题需要解决，解决参照这篇博文(https://blog.csdn.net/dadadashixiong/article/details/79978988)，可能我是本地的环境，要访问那个api才出现的问题。
接口选择腾讯位置服务的接口，见链接(https://lbs.qq.com/webservice_v1/guide-region.html),这是本人第一次学习接口的使用，如果有错误的地方，欢迎指出！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
.container {
padding-top: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="province">
</select>
</div>
<div class="form-group">
<select class="form-control" id="city">
<option>请选择城市</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="area">
<option>请选择县城</option>
</select>
</div>
</div>
</div>
<script src="./Ajax封装完成函数.js"></script>
<script src="./template-web.js"></script>
<!-- 准备好省份模板 -->
<script type="text/html" id="provinceTpl">
<option>请选择省份</option>
<!-- 循环数据 把数据拼接到html代码中 -->
{{each province}}
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 准备好城市模板 -->
<script type="text/html" id="cityTpl">
<option>请选择城市</option>
<!-- 循环数据 把数据拼接到html代码中 -->
{{each city}}
<option value={{$value.id}}>{{$value.name}}</option>
{{/each}}
</script>
<!-- 准备好县城模板 -->
<script type="text/html" id="areaTpl">
<option>请选择县城</option>
<!-- 循环数据 把数据拼接到html代码中 -->
{{each area}}
<option value={{$value.id}}>{{$value.fullname}}</option>
{{/each}}
</script>
<script>
// 获取省市区下拉框元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
// 获取省份信息
ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/district/v1/list',
data: {
key: '这里填写从接口处获得的key值'
},
success: function (data) {
//将模板与数据进行拼接
var html = template('provinceTpl', { province: data.result[0] });
//将拼接好的html字符串添加到页面中
province.innerHTML = html;
},
error: function (data) {
console.log(data.message);
}
});
//对省份添加发生改变事件
province.onchange = function () {
//获取省份id 用此id来查找此省份下的县城
var pid = this.value;
//清空县城下拉框中的数据
var html = template('areaTpl', { area: [] });
area.innerHTML = html;
//清空城市下拉框中的数据
var html = template('cityTpl', { city: [] });
city.innerHTML = html;
//获取城市信息
ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/district/v1/getchildren',
data: {
key: '这里填写从接口处获得的key值',
id: pid
},
success: function (data) {
//将模板与数据进行拼接
var html = template('cityTpl', { city: data.result[0] });
//将拼接好的html字符串添加到页面中
city.innerHTML = html;
},
error: function (data) {
console.log(data.message);
}
});
}
//对城市添加发生改变事件
city.onchange = function () {
//获取城市id
var pid = this.value;
//清空县城下拉框中的数据
var html = template('areaTpl', { area: [] });
area.innerHTML = html;
//获取县城信息
ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/district/v1/getchildren',
data: {
key: '这里填写从接口处获得的key值',
id: pid
},
success: function (data) {
//将模板与数据进行拼接
var html = template('areaTpl', { area: data.result[0] });
//将拼接好的html字符串添加到页面中
area.innerHTML = html;
},
error: function (data) {
console.log(data.message);
}
});
}
</script>
</body>
</html>
在写这个代码的时候，有几个地方值得注意一下，一是那个$value 代表的是循环过程中的当前项，要注意；二是省份 城市 县城的模板要循环对应的数据，见上方代码，注意写的格式即可。大致思路我总结一下：
- 获取三个下拉框的元素；
- 通过list接口获取省份信息，通过模板引擎将省份信息拼接到下拉框中；
- 对省份下拉框添加 onchange 事件，并且每一次省份改变后，清空城市和县城的下拉框，之后通过 getchildren 接口通过用省份的 id 获取对应城市，并用模板引擎添加到页面中；
- 对城市下拉框添加 onchange 事件，并且每一次城市改变后，清空县城下拉框，之后通过 getchildren 接口用城市 id 获取对应的乡镇，并用模板引擎添加到页面中。
