js实现省市联动效果的简单实例

下面是一个使用JavaScript和HTML实现的省市联动效果的简单实例。这个示例中，我们假设有一个省份下拉列表和一个市下拉列表，当用户选择一个省份时，市下拉列表会根据选择的省份更新选项。

HTML部分：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市联动示例</title>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
        <option value="zhejiang">浙江</option>
        <option value="jiangsu">江苏</option>
    </select>

    <select id="city" disabled>
        <option value="">请选择市</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）：


document.getElementById('province').addEventListener('change', function() {
    const citySelect = document.getElementById('city');
    citySelect.length = 1; // 清空之前的市选项
    citySelect.disabled = false; // 启用市下拉列表

    const selectedProvince = this.value;
    let cities = [];

    // 根据选择的省份来设置市选项
    switch (selectedProvince) {
        case 'zhejiang':
            cities = ['杭州市', '宁波市', '温州市'];
            break;
        case 'jiangsu':
            cities = ['南京市', '苏州市', '无锡市'];
            break;
        default:
            citySelect.disabled = true; // 如果没有选择省份，则禁用市下拉列表
            return;
    }

    // 填充市选项
    cities.forEach(city => {
        let opt = document.createElement('option');
        opt.value = city;
        opt.text = city;
        citySelect.add(opt);
    });
});

在这个例子中，我们首先通过HTML创建了两个`