省市區三級聯動
注：
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 獲取對應的鄉鎮，並用模板引擎添加到頁面中。