js地区级联

<select id="province">
    <option value="">请选择省份</option>
</select>
<select id="city">
    <option value="">请选择城市</option>
</select>

const data = {
    "北京": ["北京市"],
    "上海": ["上海市"],
    "广东": ["广州市", "深圳市"]
};

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

// 初始化省份选项
for (const province in data) {
    const option = document.createElement('option');
    option.value = province;
    option.textContent = province;
    provinceSelect.appendChild(option);
}

provinceSelect.addEventListener('change', function() {
    const selectedProvince = this.value;
    citySelect.innerHTML = '<option value="">请选择城市</option>'; // 清空城市选项

    if (selectedProvince) {
        const cities = data[selectedProvince];
        for (const city of cities) {
            const option = document.createElement('option');
            option.value = city;
            option.textContent = city;
            citySelect.appendChild(option);
        }
    }
});