js实现省市级联

在JavaScript中实现省市级联（即省份和城市的选择联动）通常涉及以下几个步骤：

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型，动态改变页面内容。
事件监听：监听用户操作（如点击、选择等），触发相应的函数。
数据结构：使用合适的数据结构（如数组、对象）存储省市数据。

实现步骤

准备数据：创建一个包含省份和对应城市的JSON数据结构。
HTML结构：创建两个下拉选择框，一个用于选择省份，一个用于选择城市。
JavaScript逻辑：
- 初始化时，根据省份数据填充省份选择框。
- 监听省份选择框的变化，根据选中的省份动态更新城市选择框的内容。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市级联</title>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script>
        const data = {
            "北京": ["东城区", "西城区", "朝阳区"],
            "上海": ["黄浦区", "徐汇区", "长宁区"],
            "广东": ["广州", "深圳", "珠海"]
        };

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

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

        // 监听省份选择框变化
        provinceSelect.addEventListener('change', function() {
            let selectedProvince = this.value;
            citySelect.innerHTML = '<option value="">请选择城市</option>'; // 清空城市选择框

            if (selectedProvince) {
                let cities = data[selectedProvince];
                cities.forEach(city => {
                    let option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        });
    </script>
</body>
</html>