一、前言
在网页的表单中,省市县三级联动是非常常见的需求。用户选择省份后,自动加载该省份的市列表;用户选择市后,自动加载该市的县列表。本文将介绍如何使用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文件,用浏览器打开即可看到实际效果。
省市县三级联动