07.demo 省市区 - 技术栈

需求

通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。

演示图

思路解析

HTML结构：
- 三个下拉菜单分别用<select>元素表示，分别为省级（province）、市级（city）、区级（district）。
- 每个下拉菜单都有一个id属性，方便在JavaScript中获取对应的元素引用。
- 给省级下拉菜单添加了onchange事件，当省级选项改变时，触发updateCities函数。
- 同样，市级下拉菜单也有onchange事件，当市级选项改变时，触发updateDistricts函数。
JavaScript逻辑：
- 定义了一个包含省市区数据的JavaScript对象 data，其中省份作为键，对应的市级数组作为值。
- 获取省、市、区三个下拉菜单的引用。
- 编写updateCities函数，该函数在省级下拉菜单选项改变时触发。
  - 获取选中的省份值。
  - 清空市级和区级下拉菜单的选项。
  - 如果选择了省份，启用市级下拉菜单，并将对应省份的市级数据添加到市级下拉菜单中。
  - 如果未选择省份，禁用市级和区级下拉菜单。
- 编写updateDistricts函数，该函数在市级下拉菜单选项改变时触发。
  - 获取选中的市值。
  - 清空区级下拉菜单的选项。
  - 如果选择了市，启用区级下拉菜单，并根据选择的市添加对应的区级数据。
  - 如果未选择市，禁用区级下拉菜单。
数据处理：
- 数据通过JavaScript对象data进行存储，每个省份对应一个市级数组。
- 在函数中根据选择的省份或市级，动态生成对应的市级和区级选项。
禁用和启用下拉菜单：
- 下拉菜单通过disabled属性进行禁用和启用。在没有选择省份或市级时，市级和区级下拉菜单被禁用，防止用户选择无效的组合。
动态生成选项：
- 使用document.createElement方法创建新的<option>元素，设置其value和textContent属性，然后将其添加到相应的下拉菜单中。

代码部分

ini 复制代码

<!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>

<!-- 省级下拉菜单 -->
<label for="province">省级：</label>
<select id="province" onchange="updateCities()">
    <option value="">请选择省份</option>
    <option value="jiangsu">江苏省</option>
    <option value="liaoning">辽宁省</option>
</select>

<!-- 市级下拉菜单 -->
<label for="city">市级：</label>
<select id="city" onchange="updateDistricts()" disabled>
    <option value="">请选择市</option>
</select>

<!-- 区级下拉菜单 -->
<label for="district">区级：</label>
<select id="district" disabled>
    <option value="">请选择区</option>
</select>

<script>
    // 省市区数据，可以根据实际情况进行修改
    const data = {
        jiangsu: ['南京市', '扬州市'],
        liaoning: ['沈阳市', '大连市']
    };

    // 获取省市区下拉菜单的引用
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');
    const districtSelect = document.getElementById('district');

    // 更新市级下拉菜单的函数
    function updateCities() {
        // 获取选中的省份值
        const selectedProvince = provinceSelect.value;

        // 清空市级和区级下拉菜单的选项
        citySelect.innerHTML = '<option value="">请选择市</option>';
        districtSelect.innerHTML = '<option value="">请选择区</option>';

        // 如果选择了省份
        if (selectedProvince) {
            // 获取对应省份的市级数据
            const cities = data[selectedProvince];

            // 启用市级下拉菜单
            citySelect.disabled = false;

            // 将市级数据添加到市级下拉菜单中
            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city;
                option.textContent = city;
                citySelect.appendChild(option);
            });
        } else {
            // 如果未选择省份，禁用市级和区级下拉菜单
            citySelect.disabled = true;
            districtSelect.disabled = true;
        }
    }

    // 更新区级下拉菜单的函数
    function updateDistricts() {
        // 获取选中的市值
        const selectedCity = citySelect.value;

        // 清空区级下拉菜单的选项
        districtSelect.innerHTML = '<option value="">请选择区</option>';

        // 如果选择了市
        if (selectedCity) {
            // 启用区级下拉菜单
            districtSelect.disabled = false;

            // 这里可以根据实际情况获取对应市的区级数据，如果有的话，添加到区级下拉菜单中
            if (selectedCity === '南京市') {
                const districts = ['鼓楼区', '秦淮区'];
                districts.forEach(district => {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    districtSelect.appendChild(option);
                });
            } else if (selectedCity === '扬州市') {
                const districts = ['广陵区', '邗江区'];
                districts.forEach(district => {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    districtSelect.appendChild(option);
                });
            }
        } else {
            // 如果未选择市，禁用区级下拉菜单
            districtSelect.disabled = true;
        }
    }
</script>
</body>
</html>