正文

掌握JS实现下拉列表自动填充全国省份及城市指南

/0 浏览量
0713

在网页开发中，实现下拉列表自动填充全国省份及城市是一个常见的功能。这不仅能够提升用户体验，还能使数据输入更加便捷。下面，我将详细讲解如何使用JavaScript（JS）来实现这一功能。

1. 准备工作

在开始编写代码之前，我们需要准备以下内容：

  • 省份和城市的数据：这些数据通常以JSON格式存储，包含了全国所有省份及其对应的城市信息。
  • HTML结构：创建一个下拉列表（<select>标签），用于显示省份和城市。

HTML结构示例：

<select id="provinceSelect"></select>
<select id="citySelect"></select>

JSON数据示例：

[
  {
    "province": "北京市",
    "cities": ["北京市", "天津市", "河北省", "山西省", "内蒙古自治区"]
  },
  {
    "province": "上海市",
    "cities": ["上海市", "江苏省", "浙江省", "安徽省", "福建省"]
  }
  // ... 其他省份
]

2. JavaScript代码实现

2.1 初始化省份下拉列表

首先，我们需要为省份下拉列表添加选项。以下是一个简单的示例：

// 假设data是上面提到的JSON数据
const data = [
  // ... 省份数据
];

// 获取省份下拉列表
const provinceSelect = document.getElementById('provinceSelect');

// 遍历省份数据，为下拉列表添加选项
data.forEach((item) => {
  const option = document.createElement('option');
  option.value = item.province;
  option.textContent = item.province;
  provinceSelect.appendChild(option);
});

2.2 省份变化时填充城市下拉列表

当用户选择一个省份后，我们需要根据所选省份填充城市下拉列表。以下是一个示例：

// 获取城市下拉列表
const citySelect = document.getElementById('citySelect');

// 为省份下拉列表添加事件监听器
provinceSelect.addEventListener('change', (event) => {
  // 清空城市下拉列表
  citySelect.innerHTML = '';

  // 获取所选省份
  const selectedProvince = event.target.value;

  // 遍历省份数据，找到所选省份对应的城市数据
  data.forEach((item) => {
    if (item.province === selectedProvince) {
      // 为城市下拉列表添加选项
      item.cities.forEach((city) => {
        const option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
      });
      return;
    }
  });
});

2.3 完整代码示例

以下是上述代码的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>省份及城市下拉列表自动填充</title>
</head>
<body>
  <select id="provinceSelect"></select>
  <select id="citySelect"></select>

  <script>
    const data = [
      // ... 省份数据
    ];

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

    data.forEach((item) => {
      const option = document.createElement('option');
      option.value = item.province;
      option.textContent = item.province;
      provinceSelect.appendChild(option);
    });

    provinceSelect.addEventListener('change', (event) => {
      citySelect.innerHTML = '';

      const selectedProvince = event.target.value;

      data.forEach((item) => {
        if (item.province === selectedProvince) {
          item.cities.forEach((city) => {
            const option = document.createElement('option');
            option.value = city;
            option.textContent = city;
            citySelect.appendChild(option);
          });
          return;
        }
      });
    });
  </script>
</body>
</html>

通过以上步骤，您就可以实现一个下拉列表自动填充全国省份及城市的功能。在实际应用中，您可以根据需要调整数据结构和样式。

-- 展开阅读全文 --