正文

HTML5表单实现省市县选择：轻松搞定多级联动选择，告别繁琐手动输入

/0 浏览量
0411

在网页设计中，省市县联动的选择框是常见的需求。用户在选择地址时，往往需要手动输入省市县信息，这不仅繁琐，还容易出错。HTML5提供了<select>元素，结合JavaScript，我们可以轻松实现省市县的多级联动选择，让用户的使用体验更加便捷。

一、HTML5结构

首先，我们需要在HTML中创建三个<select>元素，分别对应省、市、县。同时，使用<option>元素填充初始数据。

<form id="addressForm">
  <label for="province">省份：</label>
  <select id="province" name="province">
    <option value="">请选择省份</option>
    <!-- 省份数据 -->
  </select>

  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="">请选择城市</option>
    <!-- 城市数据 -->
  </select>

  <label for="county">县区：</label>
  <select id="county" name="county">
    <option value="">请选择县区</option>
    <!-- 县区数据 -->
  </select>

  <button type="submit">提交</button>
</form>

二、JavaScript实现联动

接下来，我们需要使用JavaScript来监听省份和城市的选择事件，根据选择动态更新市和县的数据。

// 省份数据
var provinces = [
  { id: 1, name: '北京市' },
  { id: 2, name: '上海市' },
  // ... 其他省份
];

// 城市数据
var cities = {
  1: [
    { id: 11, name: '北京市' },
    // ... 其他城市
  ],
  2: [
    { id: 21, name: '上海市' },
    // ... 其他城市
  ],
  // ... 其他省份对应的城市
};

// 县区数据
var counties = {
  11: [
    { id: 111, name: '北京市' },
    // ... 其他县区
  ],
  21: [
    { id: 211, name: '上海市' },
    // ... 其他县区
  ],
  // ... 其他城市对应的县区
};

// 初始化省份
function initProvinces() {
  var provinceSelect = document.getElementById('province');
  provinces.forEach(function (province) {
    var option = document.createElement('option');
    option.value = province.id;
    option.textContent = province.name;
    provinceSelect.appendChild(option);
  });
}

// 初始化城市
function initCities(provinceId) {
  var citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  var citiesData = cities[provinceId];
  if (citiesData) {
    citiesData.forEach(function (city) {
      var option = document.createElement('option');
      option.value = city.id;
      option.textContent = city.name;
      citySelect.appendChild(option);
    });
  }
}

// 初始化县区
function initCounties(cityId) {
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  var countiesData = counties[cityId];
  if (countiesData) {
    countiesData.forEach(function (county) {
      var option = document.createElement('option');
      option.value = county.id;
      option.textContent = county.name;
      countySelect.appendChild(option);
    });
  }
}

// 监听省份选择事件
document.getElementById('province').addEventListener('change', function () {
  var provinceId = this.value;
  initCities(provinceId);
  initCounties('');
});

// 监听城市选择事件
document.getElementById('city').addEventListener('change', function () {
  var cityId = this.value;
  initCounties(cityId);
});

// 初始化
initProvinces();

三、总结

通过以上步骤，我们就可以实现省市县的多级联动选择。用户在选择省份后，城市和县区的选项会根据省份进行动态更新，大大提高了用户体验。在实际应用中，可以根据需要扩展数据，实现更多地区的联动选择。

-- 展开阅读全文 --