可以使用 HTML 的 `<select>` 和 `<option>` 标签来实现下拉框，结合 JavaScript 来动态生成下拉框中的选项。下面是一个简单的示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区下拉框</title>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
<script>
// 定义省市区数据
var data = [
{
name: '北京市',
cities: [
{
name: '北京市',
districts: [
'东城区',
'西城区',
'朝阳区',
'丰台区',
'石景山区',
'海淀区',
'门头沟区',
'房山区',
'通州区',
'顺义区',
'昌平区',
'大兴区',
'怀柔区',
'平谷区',
'密云区',
'延庆区'
]
}
]
},
{
name: '上海市',
cities: [
{
name: '上海市',
districts: [
'黄浦区',
'徐汇区',
'长宁区',
'静安区',
'普陀区',
'虹口区',
'杨浦区',
'闵行区',
'宝山区',
'嘉定区',
'浦东新区',
'金山区',
'松江区',
'青浦区',
'奉贤区',
'崇明区'
]
}
]
},
{
name: '广东省',
cities: [
{
name: '广州市',
districts: [
'荔湾区',
'越秀区',
'海珠区',
'天河区',
'白云区',
'黄埔区',
'番禺区',
'花都区',
'南沙区',
'增城区',
'从化区'
]
},
{
name: '深圳市',
districts: [
'罗湖区',
'福田区',
'南山区',
'宝安区',
'龙岗区',
'盐田区'
]
},
{
name: '珠海市',
districts: [
'香洲区',
'斗门区',
'金湾区'
]
}
]
}
];
// 获取省份下拉框元素
var provinceSelect = document.querySelector('#province');
// 生成省份选项
data.forEach(function(province) {
var option = document.createElement('option');
option.value = province.name;
option.textContent = province.name;
provinceSelect.appendChild(option);
});
// 监听省份下拉框的 change 事件
provinceSelect.addEventListener('change', function(event) {
var selectedProvince = event.target.value;
var citySelect = document.querySelector('#city');
var districtSelect = document.querySelector('#district');
// 清空城市和区县下拉框
citySelect.innerHTML = '<option value="">请选择城市</option>';
districtSelect.innerHTML = '<option value="">请选择区县</option>';
// 如果选择了省份，则生成该省份下的城市选项
if (selectedProvince !== '') {
var cities = data.find(function(province) {
return province.name === selectedProvince;
}).cities;
cities.forEach(function(city) {
var option = document.createElement('option');
option.value = city.name;
option.textContent = city.name;
citySelect.appendChild(option);
});
}
});
// 监听城市下拉框的 change 事件
var citySelect = document.querySelector('#city');
citySelect.addEventListener('change', function(event) {
var selectedCity = event.target.value;
var districtSelect = document.querySelector('#district');
// 清空区县下拉框
districtSelect.innerHTML = '<option value="">请选择区县</option>';
// 如果选择了城市，则生成该城市下的区县选项
if (selectedCity !== '') {
var districts = data
.flatMap(function(province) {
return province.cities;
})
.find(function(city) {
return city.name === selectedCity;
}).districts;
districts.forEach(function(district) {
var option = document.createElement('option');
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});
}
});
</script>
</body>
</html>
```
在这个示例中，我们定义了一个多维数组 `data`，包含了省市区的数据。然后通过 JavaScript 代码来动态生成省份、城市和区县下拉框中的选项。当用户选择省份时，会根据选中的省份动态生成该省份下的城市选项。当用户选择城市时，会根据选中的城市动态生成该城市下的区县选项。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
