話不多說，上代碼
搜尋框輸入文字自動提示
.container {
padding-top: 150px;
}
請選擇城市
請選擇縣城
請選擇省份
{{each province}}
{{$value.name}}
{{/each}}
請選擇城市
{{each city}}
{{$value.name}}
{{/each}}
請選擇縣城
{{each area}}
{{$value.name}}
{{/each}}
// 擷取省市區下拉框元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var area = document.getElementById('area');
// 擷取省份資訊
ajax({
type: 'get',
url: 'http://localhost:3000/province',
success: function (data) {
// 将伺服器端傳回的資料和html進行拼接
var html = template('provinceTpl', {province: data});
// 将拼接好的html字元串顯示在頁面中
province.innerHTML = html;
}
});
// 為省份的下拉框添加值改變事件
province.onchange = function () {
// 擷取省份id
var pid = this.value;
// 清空縣城下拉框中的資料
var html = template('areaTpl', {area: []});
area.innerHTML = html;
// 根據省份id擷取城市資訊
ajax({
type: 'get',
url: '/cities',
data: {
id: pid
},
success: function (data) {
var html = template('cityTpl', {city: data});
city.innerHTML = html;
}
})
};
// 當使用者選擇城市的時候
city.onchange = function () {
// 擷取城市id
var cid = this.value;
// 根據城市id擷取縣城資訊
ajax({
type: 'get',
url: 'http://localhost:3000/areas',
data: {
id: cid
},
success: function(data) {
var html = template('areaTpl', {area: data});
area.innerHTML = html;
}
})
}
node建立伺服器，傳回資料
// 引入express架構
const express = require('express');
// 路徑處理子產品
const path = require('path');
// 建立web伺服器
const app = express();
// 靜态資源通路服務功能
app.use(express.static(path.join(__dirname, 'public')));
// 擷取省份
app.get('/province', (req, res) => {
res.json([{
id: '001',
name: '黑龍江省'
}, {
id: '002',
name: '四川省'
}, {
id: '003',
name: '河北省'
}, {
id: '004',
name: '江蘇省'
}]);
});
// 根據省份id擷取城市
app.get('/cities', (req, res) => {
// 擷取省份id
const id = req.query.id;
// 城市資訊
const cities = {
'001': [{
id: '300',
name: '哈爾濱市'
}, {
id: '301',
name: '齊齊哈爾市'
}, {
id: '302',
name: '牡丹江市'
}, {
id: '303',
name: '佳木斯市'
}],
'002': [{
id: '400',
name: '成都市'
}, {
id: '401',
name: '綿陽市'
}, {
id: '402',
name: '德陽市'
}, {
id: '403',
name: '攀枝花市'
}],
'003': [{
id: '500',
name: '石家莊市'
}, {
id: '501',
name: '唐山市'
}, {
id: '502',
name: '秦皇島市'
}, {
id: '503',
name: '邯鄲市'
}],
'004': [{
id: '600',
name: '常州市'
}, {
id: '601',
name: '徐州市'
}, {
id: '602',
name: '南京市'
}, {
id: '603',
name: '淮安市'
}]
}
// 響應
res.send(cities[id]);
});
// 根據城市id擷取縣城
app.get('/areas', (req, res) => {
// 擷取城市id
const id = req.query.id;
// 縣城資訊
const areas = {
'300': [{
id: '20',
name: '道裡區',
}, {
id: '21',
name: '南崗區'
}, {
id: '22',
name: '平房區',
}, {
id: '23',
name: '松北區'
}],
'301': [{
id: '30',
name: '龍沙區'
}, {
id: '31',
name: '鐵鋒區'
}, {
id: '32',
name: '富拉爾基區'
}]
};
// 響應
res.send(areas[id] || []);
});
// 監聽端口
app.listen(3000);
// 控制台提示輸出
console.log('伺服器啟動成功');