简单js代码实现selece二级联动(推荐)

// 假设有两个select元素，id分别为'province'和'city'
// 这里以省份和城市为例，实际使用时需要替换为具体的数据

// 省份数据
const provinces = [
    { id: 1, name: '浙江' },
    { id: 2, name: '江苏' },
    // 添加更多省份...
];

// 城市数据，这里以对象形式存储，键为省份id，值为对应城市的数组
const cities = {
    1: [
        { id: 11, name: '杭州' },
        { id: 12, name: '宁波' },
        // 添加更多浙江的城市...
    ],
    2: [
        { id: 21, name: '南京' },
        { id: 22, name: '苏州' },
        // 添加更多江苏的城市...
    ],
    // 添加更多省份的城市...
};

// 页面加载完成后，填充省份select
window.onload = function() {
    const provinceSelect = document.getElementById('province');
    provinces.forEach(province => {
        const option = document.createElement('option');
        option.value = province.id;
        option.textContent = province.name;
        provinceSelect.appendChild(option);
    });

    // 省份select改变时，更新城市select
    provinceSelect.addEventListener('change', function() {
        const citySelect = document.getElementById('city');
        citySelect.innerHTML = ''; // 清空原有选项
        const selectedProvinceId = this.value;
        if (cities[selectedProvinceId]) {
            cities[selectedProvinceId].forEach(city => {
                const option = document.createElement('option');
                option.value = city.id;
                option.textContent = city.name;
                citySelect.appendChild(option);
            });
        }
    });
};

这段代码首先定义了省份和城市的数据结构，然后在页面加载完成后填充省份的select元素。同时，给省份的select元素添加了一个change事件监听器，当选择省份时，会根据选择的省份id去更新城市的select元素。注意，这里假设城市数据已经根据省份id进行了分类存储。在实际应用中，你可能需要根据实际情况调整数据结构或获取数据的方式。