html+js 实现级联查询代码
时间: 2023-10-11 12:07:10 浏览: 33
下面是一个简单的 HTML 和 JavaScript 实现级联查询的示例代码:
HTML 代码:
```html
<label for="province">省份:</label>
<select id="province" name="province">
<option value="">请选择</option>
<option value="1">江苏省</option>
<option value="2">浙江省</option>
<option value="3">广东省</option>
</select>
<label for="city">城市:</label>
<select id="city" name="city">
<option value="">请选择</option>
</select>
<label for="area">区县:</label>
<select id="area" name="area">
<option value="">请选择</option>
</select>
```
JavaScript 代码:
```javascript
// 省份数据
var provinceData = [
{id: 1, name: '江苏省'},
{id: 2, name: '浙江省'},
{id: 3, name: '广东省'}
];
// 城市数据
var cityData = [
{provinceId: 1, id: 11, name: '南京市'},
{provinceId: 1, id: 12, name: '苏州市'},
{provinceId: 2, id: 21, name: '杭州市'},
{provinceId: 2, id: 22, name: '宁波市'},
{provinceId: 3, id: 31, name: '广州市'},
{provinceId: 3, id: 32, name: '深圳市'}
];
// 区县数据
var areaData = [
{cityId: 11, id: 111, name: '玄武区'},
{cityId: 11, id: 112, name: '秦淮区'},
{cityId: 12, id: 121, name: '姑苏区'},
{cityId: 12, id: 122, name: '吴中区'},
{cityId: 21, id: 211, name: '西湖区'},
{cityId: 21, id: 212, name: '上城区'},
{cityId: 22, id: 221, name: '江北区'},
{cityId: 22, id: 222, name: '海曙区'},
{cityId: 31, id: 311, name: '天河区'},
{cityId: 31, id: 312, name: '越秀区'},
{cityId: 32, id: 321, name: '福田区'},
{cityId: 32, id: 322, name: '罗湖区'}
];
// 获取省份元素
var provinceEl = document.getElementById('province');
// 获取城市元素
var cityEl = document.getElementById('city');
// 获取区县元素
var areaEl = document.getElementById('area');
// 初始化省份选项
for (var i = 0; i < provinceData.length; i++) {
var option = document.createElement('option');
option.value = provinceData[i].id;
option.text = provinceData[i].name;
provinceEl.appendChild(option);
}
// 省份选项变化时更新城市选项
provinceEl.addEventListener('change', function() {
// 清空城市选项
cityEl.innerHTML = '<option value="">请选择</option>';
// 获取选中的省份 ID
var provinceId = this.value;
// 遍历城市数据,添加符合条件的选项
for (var i = 0; i < cityData.length; i++) {
if (cityData[i].provinceId == provinceId) {
var option = document.createElement('option');
option.value = cityData[i].id;
option.text = cityData[i].name;
cityEl.appendChild(option);
}
}
// 触发城市选项变化事件,更新区县选项
var event = new Event('change');
cityEl.dispatchEvent(event);
});
// 城市选项变化时更新区县选项
cityEl.addEventListener('change', function() {
// 清空区县选项
areaEl.innerHTML = '<option value="">请选择</option>';
// 获取选中的城市 ID
var cityId = this.value;
// 遍历区县数据,添加符合条件的选项
for (var i = 0; i < areaData.length; i++) {
if (areaData[i].cityId == cityId) {
var option = document.createElement('option');
option.value = areaData[i].id;
option.text = areaData[i].name;
areaEl.appendChild(option);
}
}
});
```
这段代码实现了三级联动,当选择省份时,会动态加载对应的城市选项;当选择城市时,会动态加载对应的区县选项。