js实现三级联动

m0_73734137

于 2024-01-07 10:30:11 发布

阅读量535

点赞数 8

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73734137/article/details/135436742

版权

本文介绍了如何使用JavaScript在HTML中构建一个三级联动选择器，通过province、city和district数据结构，实现在省份选择后动态加载对应城市和区县的选项，展示了动态更新DOM内容的技术应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <title>三级联动</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <select id="province">
    <option value="">请选择省份</option>
  </select>
  <select id="city">
    <option value="">请选择城市</option>
  </select>
  <select id="district">
    <option value="">请选择区县</option>
  </select>

  <script>
    // 省市区数据
    const data = {
      province: [
        { name: '北京', cities: ['北京市'] },
        { name: '上海', cities: ['上海市'] },
        { name: '广东', cities: ['广州市', '深圳市', '珠海市'] }
        // 其他省市数据...
      ],
      city: {
        '北京': ['北京市'],
        '上海': ['上海市'],
        '广东': ['广州市', '深圳市', '珠海市']
        // 其他省对应的市数据...
      },
      district: {
        '北京市': ['东城区', '西城区', '朝阳区', '海淀区'],
        '上海市': ['黄浦区', '徐汇区', '静安区', '长宁区'],
        '广州市': ['越秀区', '荔湾区', '天河区', '海珠区'],
        '深圳市': ['罗湖区', '福田区', '南山区', '宝安区'],
        '珠海市': ['香洲区', '斗门区', '金湾区']
        // 其他市对应的区县数据...
      }
    };

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

    // 初始化省份选项
    for (let i = 0; i < data.province.length; i++) {
      const option = document.createElement('option');
      option.value = data.province[i].name;
      option.textContent = data.province[i].name;
      provinceSelect.appendChild(option);
    }

    // 省份选择改变时触发
    provinceSelect.addEventListener('change', function() {
      const selectedProvince = this.value;
      resetOptions(citySelect, '请选择城市');

      if (selectedProvince) {
        const cities = data.city[selectedProvince];

        for (let i = 0; i < cities.length; i++) {
          const option = document.createElement('option');
          option.value = cities[i];
          option.textContent = cities[i];
          citySelect.appendChild(option);
        }
      }
    });

    // 城市选择改变时触发
    citySelect.addEventListener('change', function() {
      const selectedCity = this.value;
      resetOptions(districtSelect, '请选择区县');

      if (selectedCity) {
        const districts = data.district[selectedCity];

        for (let i = 0; i < districts.length; i++) {
          const option = document.createElement('option');
          option.value = districts[i];
          option.textContent = districts[i];
          districtSelect.appendChild(option);
        }
      }
    });

    // 重置下拉选项
    function resetOptions(selectElement, defaultText) {
      selectElement.innerHTML = '';
      const defaultOption = document.createElement('option');
      defaultOption.value = '';
      defaultOption.textContent = defaultText;
      selectElement.appendChild(defaultOption);
    }
  </script>
</body>
</html>

首先，在 HTML 中定义了三个 select 元素来表示省份、城市和区县的选择。

然后，在 JavaScript 中定义了一个 data 对象，保存了省市区的数据。其中，province 属性保存了所有的省份数据，city 属性保存了各个省份对应的城市数据，district 属性保存了各个城市对应的区县数据。

接下来，我们通过获取 select 元素的引用，并在初始化时给第一个省份 select 元素添加省份选项，在这个示例中，我们使用原生的 JavaScript 实现了三级联动的功能。首先，在 HTML 中定义了三个 select 元素来表示省份、城市和区县的选择。

接下来，我们通过获取 select 元素的引用，并在初始化时给第一个省份 select 元素添加省份选项。然后，为省份 select 元素添加一个 change 事件监听器，当省份选择改变时，根据选择的省份动态生成对应的城市选项，并将其添加到城市 select 元素中。同样地，为城市 select 元素添加 change 事件监听器，当城市选择改变时，根据选择的城市动态生成对应的区县选项，并将其添加到区县 select 元素中。

最后，我们定义了一个 resetOptions 函数，用于清空并重置 select 元素的选项。该函数接受两个参数，一个是 select 元素的引用，另一个是默认的提示文本。它会先清空 select 元素的子元素，然后创建一个默认的选项，并将其添加至 select 元素中。