省市县三级联动的实现

一、前言

在网页的表单中，省市县三级联动是非常常见的需求。用户选择省份后，自动加载该省份的市列表；用户选择市后，自动加载该市的县列表。本文将介绍如何使用HTML、CSS和JavaScript实现省市县三级联动功能。

二、HTML部分

首先，我们需要在HTML文件中创建三个下拉框，分别对应省、市、县：

<select id="province">
    <option value="">请选择省份</option>
</select>

<select id="city">
    <option value="">请选择市</option>
</select>

<select id="county">
    <option value="">请选择县区</option>
</select>

需要注意的是，初始时下拉框中应该显示“请选择省份”、“请选择市”和“请选择县区”，因此我们在option标签中的value属性中留空，这样用户在未进行选择时提交的值也将为空。

三、CSS部分

为了美观，我们可以在CSS中为三个下拉框添加一些样式。例如：

select {
    padding: 6px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

option {
    font-size: 14px;
}

这段代码使得下拉框有较为明显的边框，选项字体较小。

四、JavaScript部分

接下来是最重要的部分，我们需要使用JavaScript实现省市县三级联动。

首先，我们需要定义省、市、县三个数组，用于存储相关信息。例如：

var provinces = [
    {name: '北京', cities: ['北京市']},
    {name: '上海', cities: ['上海市']},
    {name: '河北省', cities: ['石家庄市', '唐山市', '邯郸市', '秦皇岛市', '保定市', '张家口市']},
    {name: '江苏省', cities: ['南京市', '苏州市', '无锡市', '常州市', '扬州市']}
];

var cities = [
    {name: '北京市', counties: ['东城区', '西城区', '朝阳区', '海淀区', '丰台区']},
    {name: '上海市', counties: ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区']},
    {name: '石家庄市', counties: ['长安区', '桥西区', '新华区', '裕华区', '井陉矿区']},
    {name: '唐山市', counties: ['路北区', '路南区', '古冶区', '开平区', '曹妃甸区']},
    {name: '邯郸市', counties: ['邯山区', '丛台区', '复兴区', '峰峰矿区', '肥乡区']},
    {name: '南京市', counties: ['玄武区', '秦淮区', '鼓楼区', '建邺区', '雨花台区']},
    {name: '苏州市', counties: ['姑苏区', '虎丘区', '吴中区', '相城区', '吴江区']}
];

var counties = [
    {name: '东城区'},
    {name: '西城区'},
    {name: '朝阳区'},
    {name: '海淀区'},
    {name: '丰台区'},
    {name: '黄浦区'},
    {name: '徐汇区'},
    {name: '长宁区'},
    {name: '静安区'},
    {name: '普陀区'},
    {name: '长安区'},
    {name: '桥西区'},
    {name: '新华区'},
    {name: '裕华区'},
    {name: '井陉矿区'},
    {name: '路北区'},
    {name: '路南区'},
    {name: '古冶区'},
    {name: '开平区'},
    {name: '曹妃甸区'},
    {name: '邯山区'},
    {name: '丛台区'},
    {name: '复兴区'},
    {name: '峰峰矿区'},
    {name: '肥乡区'},
    {name: '玄武区'},
    {name: '秦淮区'},
    {name: '鼓楼区'},
    {name: '建邺区'},
    {name: '雨花台区'},
    {name: '姑苏区'},
    {name: '虎丘区'},
    {name: '吴中区'},
    {name: '相城区'},
    {name: '吴江区'}
];

然后，我们需要在页面加载完成时向省份下拉框中动态添加选项。实现方法如下：

// 动态加载省份列表
function loadProvinces() {
    var selectProvince = document.getElementById('province');
    for (var i = 0; i < provinces.length; i++) {
        var option = document.createElement('option');
        option.value = provinces[i].name;
        option.text = provinces[i].name;
        selectProvince.add(option);
    }
}
loadProvinces();

该函数将循环遍历provinces数组，并将每个省份的名称动态添加到省份下拉框中。同时，为了便于后续的操作，我们需要在省份的option标签中添加一个自定义属性，用于存放该省份的市列表，例如：

option.cities = provinces[i].cities;

接下来，我们需要为省份下拉框绑定change事件，当用户选择某个省份时，动态加载该省份的市列表。实现方法如下：

var selectProvince = document.getElementById('province');
var selectCity = document.getElementById('city');
var selectCounty = document.getElementById('county');

// 省份下拉框选择事件
selectProvince.onchange = function() {
    // 先清除市和县区下拉框的选项
    selectCity.options.length = 1;
    selectCounty.options.length = 1;
    // 获取当前选中的省份名称
    var provinceName = this.options[this.selectedIndex].value;
    // 查找该省份的市列表
    for (var i = 0; i < provinces.length; i++) {
        if (provinces[i].name === provinceName) {
            var cities = provinces[i].cities;
            // 动态加载市列表
            for (var j = 0; j < cities.length; j++) {
                var option = document.createElement('option');
                option.value = cities[j];
                option.text = cities[j];
                selectCity.add(option);
            }
            // 在省份的option标签中添加一个自定义属性，用于存放该省份的市列表
            selectProvince.options[this.selectedIndex].cities = cities;
            break;
        }
    }
}

该函数在省份下拉框change事件触发时，先清除市和县区下拉框中原有的选项。然后获取用户选择的省份名称，并查找该省份的市列表。将市列表动态添加到市下拉框中，并在省份的option标签中添加一个自定义属性，用于存放该省份的市列表。

接下来，我们需要为市下拉框绑定change事件，当用户选择某个市时，动态加载该市的县区列表。实现方法如下：

// 市下拉框选择事件
selectCity.onchange = function() {
    // 先清除县区下拉框的选项
    selectCounty.options.length = 1;
    // 获取当前选中的市名称
    var cityName = this.options[this.selectedIndex].value;
    // 查找该市的县区列表
    for (var i = 0; i < cities.length; i++) {
        if (cities[i].name === cityName) {
            var counties = cities[i].counties;
            // 动态加载县区列表
            for (var j = 0; j < counties.length; j++) {
                var option = document.createElement('option');
                option.value = counties[j];
                option.text = counties[j];
                selectCounty.add(option);
            }
            break;
        }
    }
}

该函数在市下拉框change事件触发时，先清除县区下拉框中原有的选项。然后获取用户选择的市名称，并查找该市的县区列表。将县区列表动态添加到县区下拉框中。

五、Demo演示

下面是完整的代码示例。复制代码并保存为.html文件，用浏览器打开即可看到实际效果。

 select {
 padding: 6px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid #ccc;
 }
 option {
 font-size: 14px;
 }
 请选择省份
 请选择市
 请选择县区
 var provinces = [
 {name: '北京', cities: ['北京市']},
 {name: '上海', cities: ['上海市']},
 {name: '河北省', cities: ['石家庄市', '唐山市', '邯郸市', '秦皇岛市', '保定市', '张家口市']},
 {name: '江苏省', cities: ['南京市', '苏州市', '无锡市', '常州市', '扬州市']}
 ];
 var cities = [
 {name: '北京市', counties: ['东城区', '西城区', '朝阳区', '海淀区', '丰台区']},
 {name: '上海市', counties: ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区']},
 {name: '石家庄市', counties: ['长安区', '桥西区', '新华区', '裕华区', '井陉矿区']},
 {name: '唐山市', counties: ['路北区', '路南区', '古冶区', '开平区', '曹妃甸区']},
 {name: '邯郸市', counties: ['邯山区', '丛台区', '复兴区', '峰峰矿区', '肥乡区']},
 {name: '南京市', counties: ['玄武区', '秦淮区', '鼓楼区', '建邺区', '雨花台区']},
 {name: '苏州市', counties: ['姑苏区', '虎丘区', '吴中区', '相城区', '吴江区']}
 ];
 var counties = [
 {name: '东城区'},
 {name: '西城区'},
 {name: '朝阳区'},
 {name: '海淀区'},
 {name: '丰台区'},
 {name: '黄浦区'},
 {name: '徐汇区'},
 {name: '长宁区'},
 {name: '静安区'},
 {name: '普陀区'},
 {name: '长安区'},
 {name: '桥西区'},
 {name: '新华区'},
 {name: '裕华区'},
 {name:
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/184999.html