JavaScript实现网页下拉列表的省市联动

大家好，今天我和大家分享网页中下拉列表的省市联动。在我们平常填写一些信息时就会有省市联动，就是在第一个下拉列表中选择我们所在的省，后面一个下拉列表显示该省的所有城市。

既然是省市联动，我们就不能把数据直接写到网页上，我们应该通过第一个下拉列表的省动态生成该省的所有城市。我们可以先定义一个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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。