超简单JS二级、多级联动的简单实例

当然，我可以给你一个超简单的JavaScript二级联动（比如省份和城市）的实例。这里我们假设你已经有了一个包含省份和城市信息的对象数组。我们将使用HTML和JavaScript来实现这个功能。

HTML部分（假设你已经有了这个HTML结构）:

<select id="province">
    <option value="">请选择省份</option>
    <!-- 省份选项将动态添加 -->
</select>

<select id="city" disabled>
    <option value="">请先选择省份</option>
</select>

JavaScript部分（我们将动态添加省份和城市）:

// 假设的数据
const data = [
    {
        name: '浙江省',
        cities: ['杭州市', '宁波市', '温州市']
    },
    {
        name: '江苏省',
        cities: ['南京市', '苏州市', '无锡市']
    }
    // 你可以继续添加其他省份和城市
];

// 填充省份选项
const provinceSelect = document.getElementById('province');
data.forEach(province => {
    let option = new Option(province.name, province.name);
    provinceSelect.options.add(option);
});

// 省份选择变化时，更新城市选项
provinceSelect.addEventListener('change', function() {
    const selectedProvince = this.value;
    const citySelect = document.getElementById('city');
    citySelect.disabled = false;
    citySelect.length = 1; // 移除除默认外的所有选项

    if (selectedProvince) {
        const cities = data.find(province => province.name === selectedProvince).cities;
        cities.forEach(city => {
            let option = new Option(city, city);
            citySelect.options.add(option);
        });
    } else {
        citySelect.disabled = true;
        citySelect.options[0].text = '请先选择省份';
    }
});

这段代码首先定义了一个包含省份和城市信息的数组`data`。然后，它遍历这个数组来填充省份选择框（``）。当用户选择一个省份时，会触发一个事件监听器，该监听器会查找与该省份对应的城市，并使用这些城市来填充城市选择框（``）。如果用户没有选择省份，则城市选择框将被禁用并显示默认提示信息。