vscode:
index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>省市区三级联动</h2>
<label for="">请选择省份:</label>
<select id="province">
<option value="">--省份--</option>
</select>
<select id="city">
<option value="">--市区--</option>
</select>
<select id="country">
<option value="">--区县--</option>
</select>
<script>
let province = document.getElementById("province");
let city = document.getElementById("city");
let country = document.getElementById("country");
let xhr = new XMLHttpRequest();
xhr.open("get", "/province")
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
let res = xhr.responseText;
let provinces = JSON.parse(res);
let str = `<option value="">--省份--</option>`
provinces.forEach(item => {
str += `<option value="${item}">${item}</option>`
});
province.innerHTML = str;
}
}
province.onchange = function () {
xhr.open("get", "city?province=" + this.value);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
let res = xhr.responseText;
let cities = JSON.parse(res);
let str = `<option value="">--市区--</option>`
cities.forEach(item => {
str += `<option value="${item}">${item}</option>`
});
city.innerHTML = str;
}
}
}
city.onchange = function () {
xhr.open("get", "/country?city=" + this.value);
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let res = xhr.responseText;
let countries = JSON.parse(res)
let str = '<option value="">--区县--</option>'
countries.forEach(item => {
str += `<option value="${item}">${item}</option>`
})
country.innerHTML = str;
}
}
}
</script>
</body>
</html>
JS:
let express = require("express");
let app = express();
let data = require("./cityData.min.json");
app.set("view engine","ejs");
app.set("views","./views");
app.get("/",(req,res)=>{
res.render("index");
})
app.listen(3000,(req,res)=>{
console.log("服务器在3000运行起来了")
})
app.get("/province",(req,res)=>{
let provinces = [];
data.forEach(item=>{
provinces.push(item.n)
})
res.json(provinces);
})
app.get("/city",(req,res)=>{
let province = req.query.province;
let cities = [];
data.forEach(item=>{
if(item.n == province){
item.s.forEach(item1=>{
cities.push(item1.n)
})
}
})
res.json(cities)
})
app.get("/country",(req,res)=>{
let city = req.query.city;
let countries = [];
data.forEach(item=>{
item.s.forEach(item1=>{
if(item1.n === city){
item1.s && item1.s.forEach(item2=>{
countries.push(item2.n)
})
}
})
})
res.json(countries)
})
cityData.min.json:
链接:
https://pan.baidu.com/s/1zeFStAQCboWTQYAmwr5U_Q 提取码: kmr6 复制这段内容后打开百度网盘手机App,操作更方便哦
提取码:
kmr6