html的select三级联动
时间: 2023-10-02 19:08:24 浏览: 32
三级联动指的是在选择一个下拉框选项后,下一个下拉框的选项会根据前一个下拉框的选项进行动态加载。具体实现可以参考以下示例代码:
HTML代码:
```html
<label>省份:</label>
<select id="province"></select>
<label>城市:</label>
<select id="city"></select>
<label>区县:</label>
<select id="district"></select>
```
JavaScript代码:
```javascript
// 省份数据
var provinceData = [
{name: '北京', code: '110000'},
{name: '天津', code: '120000'},
{name: '河北省', code: '130000'},
// ...
];
// 城市数据
var cityData = {
'110000': [
{name: '北京市', code: '110100'},
],
'120000': [
{name: '天津市', code: '120100'},
],
'130000': [
{name: '石家庄市', code: '130100'},
{name: '唐山市', code: '130200'},
// ...
],
// ...
};
// 区县数据
var districtData = {
'110100': [
{name: '东城区', code: '110101'},
{name: '西城区', code: '110102'},
// ...
],
'120100': [
{name: '和平区', code: '120101'},
{name: '河东区', code: '120102'},
// ...
],
'130100': [
{name: '长安区', code: '130102'},
{name: '桥西区', code: '130104'},
// ...
],
// ...
};
// 初始化省份下拉框
var provinceSelect = document.getElementById('province');
for (var i = 0; i < provinceData.length; i++) {
var option = document.createElement('option');
option.value = provinceData[i].code;
option.text = provinceData[i].name;
provinceSelect.appendChild(option);
}
// 初始化城市下拉框
var citySelect = document.getElementById('city');
provinceSelect.onchange = function() {
citySelect.innerHTML = ''; // 清空城市下拉框
var provinceCode = this.value;
var cities = cityData[provinceCode];
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.value = cities[i].code;
option.text = cities[i].name;
citySelect.appendChild(option);
}
// 触发城市下拉框的change事件,动态加载区县下拉框
citySelect.onchange();
};
// 初始化区县下拉框
var districtSelect = document.getElementById('district');
citySelect.onchange = function() {
districtSelect.innerHTML = ''; // 清空区县下拉框
var cityCode = this.value;
var districts = districtData[cityCode];
for (var i = 0; i < districts.length; i++) {
var option = document.createElement('option');
option.value = districts[i].code;
option.text = districts[i].name;
districtSelect.appendChild(option);
}
};
// 页面加载完成后触发省份下拉框的change事件,动态加载城市下拉框
provinceSelect.onchange();
```
以上代码实现了一个简单的三级联动下拉框,可以根据实际需求进行修改。