请使用js实现一个省市县级联的效果

实现一个省市县级联效果通常需要一个包含所有省市县数据的数据源，然后通过JavaScript动态地根据用户选择来更新下拉列表。以下是一个简单的实现示例：

1. HTML结构：

<select id="province"></select>
<select id="city"></select>
<select id="county"></select>

2. JavaScript代码：

首先，我们需要一个包含所有省市县数据的数据源。为了简化，这里只展示部分数据。

const data = {
    "北京市": {
        "北京市": ["东城区", "西城区", "朝阳区"]
    },
    "广东省": {
        "广州市": ["天河区", "越秀区", "荔湾区"],
        "深圳市": ["南山区", "福田区", "宝安区"]
    }
    // ... 其他省市县数据
};

const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const countySelect = document.getElementById('county');

// 初始化省份数据
for (let province in data) {
    let option = new Option(province, province);
    provinceSelect.add(option);
}

// 省份改变时更新城市和县
provinceSelect.onchange = function() {
    citySelect.innerHTML = ''; // 清空城市下拉列表
    countySelect.innerHTML = ''; // 清空县下拉列表
    let cities = data[this.value];
    if (cities) {
        for (let city in cities) {
            let option = new Option(city, city);
            citySelect.add(option);
        }
        // 默认选中第一个城市，并触发其change事件来更新县下拉列表
        citySelect.selectedIndex = 0;
        citySelect.onchange();
    }
};

// 城市改变时更新县
citySelect.onchange = function() {
    countySelect.innerHTML = ''; // 清空县下拉列表
    let counties = data[provinceSelect.value][this.value];
    if (counties) {
        for (let county of counties) {
            let option = new Option(county, county);
            countySelect.add(option);
        }
    }
};

// 默认触发省份的change事件来初始化城市和县下拉列表
provinceSelect.onchange();

这个示例中，我们使用了嵌套的JavaScript对象来表示省市县的数据结构。当省份选择改变时，我们会更新城市下拉列表，并清空县下拉列表。类似地，当城市选择改变时，我们会更新县下拉列表。最后，我们默认触发省份的change事件来初始化城市和县下拉列表。