大家好，今天我和大家分享网页中下拉列表的省市联动。在我们平常填写一些信息时就会有省市联动，就是在第一个下拉列表中选择我们所在的省，后面一个下拉列表显示该省的所有城市。
既然是省市联动，我们就不能把数据直接写到网页上，我们应该通过第一个下拉列表的省动态生成该省的所有城市。我们可以先定义一个JSON对象表示省，在对象中定义一个数组存储一个省中的所有城市（这里的城市也是JSON对象），最后用数组存储所有的省。我们可以利用JavaScript在网页上面添加选项option。联动这块我们可以为第一个下拉列表添加一个change事件，当它改变时后一个下拉列表的就更新为当前省的所有城市。
首先我们需要省市的数据:就是一个包含所有省的数组，而且每个省中有一个城市数组。这里我是写北京为例子。
var data = [
{
"province": "北京",
"city": [
{
"cname": "北京",
"code": "101010100"
},
{
"cname": "朝阳",
"code": "101010300"
},
{
"cname": "顺义",
"code": "101010400"
},
{
"cname": "怀柔",
"code": "101010500"
},
{
"cname": "通州",
"code": "101010600"
},
...
]
},
....]
然后我们先在页面上显示两个下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所在地区</title>
</head>
<body>
<select id="province"></select>省
<select id="city"></select>市
<script src="js/data.js"></script>
<script src="js/mycity.js"></script>
</body>
</html>
对应的JavaScript的代码：先对数组进行遍历得到的是所有的省，再对每个省遍历就能改省的所有城市。通过创建和添加option节点在页面上显示。
// 对数据进行遍历显示所有省
data.forEach((p, i) => {
//创建一个option节点
let option = document.createElement('option');
//设置option节点文本值
option.textContent = p.province;
//设置option节点的value值
option.value = i;
//向id为province的元素中追加了一个子节点option
$('province').appendChild(option);
//默认在下拉列表加载城市
chooseCity(0);
})
//为向id为province的元素添加‘change'事件
$('province').addEventListener('change', function () {
/* 在下拉列表中加载城市*/
chooseCity(this.value);
})
//函数：获取对应省的所有城市
function chooseCity(index) {
//通过索引获取对应的省
let p = data[index];
//清除当前的城市信息
$('city').length = 0;
//获取对应省的所有城市
let cities = p.city;
//对所有城市进行遍历显示
cities.forEach(c => {
//创建一个option1节点
let option1 = document.createElement('option');
//设置option1节点文本值
option1.textContent = c.cname;
//向id为city的元素中追加了一个子节点option1
$('city').appendChild(option1);
})
}
//函数：通过id获取元素
function $(id) {
return document.getElementById(id);
}
