从零构建“三级联动”省市区选择器，让表单轻松自如！

2024-01-05 01:13:37

SEO 关键词：

文章：

三级联动选择器是一种常见的 Web 表单元素，它允许用户在三个相关下拉菜单中选择省、市和区县。这种选择器可以简化用户输入并确保所选地址有效。在本文中，我们将介绍如何使用原生 JavaScript 实现一个三级联动省市区选择器。

第一步：准备数据

在开始构建选择器之前，我们需要先准备省、市和区县的数据。这些数据可以从各种在线资源获取，也可以从本地数据库中获取。

const provinces = [
  {
    name: '北京',
    cities: [
      {
        name: '东城区',
        counties: [
          '东城区街道1',
          '东城区街道2',
          '东城区街道3',
        ],
      },
      {
        name: '西城区',
        counties: [
          '西城区街道1',
          '西城区街道2',
          '西城区街道3',
        ],
      },
    ],
  },
  {
    name: '上海',
    cities: [
      {
        name: '黄浦区',
        counties: [
          '黄浦区街道1',
          '黄浦区街道2',
          '黄浦区街道3',
        ],
      },
      {
        name: '徐汇区',
        counties: [
          '徐汇区街道1',
          '徐汇区街道2',
          '徐汇区街道3',
        ],
      },
    ],
  },
];

第二步：构建省级下拉菜单

接下来，我们将构建省级下拉菜单。该菜单将显示所有省份的名称。

<select id="province">
  <option value="" disabled selected>请选择省份</option>
  ${provinces.map((province) => `<option value="${province.name}">${province.name}</option>`)}
</select>

第三步：构建市级下拉菜单

市级下拉菜单将显示所选省份的所有城市。要实现这一点，我们将使用 JavaScript 来动态填充下拉菜单。

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

const citySelect = document.getElementById('city');

const provinceSelect = document.getElementById('province');
provinceSelect.addEventListener('change', (event) => {
  const selectedProvince = event.target.value;

  const cities = provinces.find((province) => province.name === selectedProvince).cities;

  citySelect.innerHTML = '';
  cities.forEach((city) => {
    const option = document.createElement('option');
    option.value = city.name;
    option.textContent = city.name;
    citySelect.appendChild(option);
  });
});

第四步：构建区县下拉菜单

区县下拉菜单将显示所选城市的所有区县。与市级下拉菜单类似，我们将使用 JavaScript 来动态填充下拉菜单。

<select id="county">
  <option value="" disabled selected>请选择区县</option>
</select>

const countySelect = document.getElementById('county');

const citySelect = document.getElementById('city');
citySelect.addEventListener('change', (event) => {
  const selectedCity = event.target.value;

  const counties = provinces.find((province) => province.name === selectedProvince).cities.find((city) => city.name === selectedCity).counties;

  countySelect.innerHTML = '';
  counties.forEach((county) => {
    const option = document.createElement('option');
    option.value = county;
    option.textContent = county;
    countySelect.appendChild(option);
  });
});