若依前端实现下拉框三级联动代码
时间: 2023-08-24 20:05:11 浏览: 61
以下是一个简单的下拉框三级联动的实现示例代码,供参考:
HTML部分:
```html
<select id="province">
<option value="">请选择省份</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
```
JavaScript部分:
```javascript
// 获取省份下拉框
var provinceSelect = document.getElementById("province");
// 获取城市下拉框
var citySelect = document.getElementById("city");
// 获取区县下拉框
var districtSelect = document.getElementById("district");
// 定义省份数据
var provinceData = [
{name: "北京", cities: ["北京市"]},
{name: "上海", cities: ["上海市"]},
{name: "广东", cities: ["广州市", "深圳市", "珠海市", "汕头市", "韶关市"]}
];
// 省份下拉框change事件监听函数
provinceSelect.addEventListener("change", function() {
// 获取选中的省份名称
var selectedProvince = provinceSelect.value;
// 根据选中的省份名称,获取对应的城市数据
var cities = provinceData.find(function(item) {
return item.name === selectedProvince;
}).cities;
// 清空城市下拉框的选项
citySelect.innerHTML = '<option value="">请选择城市</option>';
// 动态生成城市下拉框选项
cities.forEach(function(item) {
var option = document.createElement("option");
option.value = item;
option.textContent = item;
citySelect.appendChild(option);
});
// 清空区县下拉框的选项
districtSelect.innerHTML = '<option value="">请选择区县</option>';
});
// 城市下拉框change事件监听函数
citySelect.addEventListener("change", function() {
// 获取选中的城市名称
var selectedCity = citySelect.value;
// 根据选中的城市名称,获取对应的区县数据(这里使用假数据)
var districts = ["黄浦区", "徐汇区", "长宁区", "静安区", "闸北区"];
// 清空区县下拉框的选项
districtSelect.innerHTML = '<option value="">请选择区县</option>';
// 动态生成区县下拉框选项
districts.forEach(function(item) {
var option = document.createElement("option");
option.value = item;
option.textContent = item;
districtSelect.appendChild(option);
});
});
```
上述代码中,省份数据使用一个数组进行存储,每个省份对象包含名称和城市数据。省份下拉框的change事件监听函数中,根据选中的省份名称获取对应的城市数据,并动态生成城市下拉框选项。城市下拉框的change事件监听函数中,根据选中的城市名称获取对应的区县数据,并动态生成区县下拉框选项。