JS实现省市县三级下拉联动

JS实现省市县三级下拉联动是前端开发中比较常见的需求，可以让用户更方便地选择地址信息。下面我将分享一下我对于这个需求的实现思路和具体操作步骤。

实现思路

省市县三级下拉联动的实现思路其实比较简单，大体可以分为以下几个步骤：

创建一个包含省市县的地址数据，这个数据可以是JSON格式的对象，也可以是从后台接口获取的数据。
给省份下拉列表绑定change事件，当省份选项发生变化时，根据省份获取该省份下所有的城市，并动态生成城市下拉列表。
给城市下拉列表绑定change事件，当城市选项发生变化时，根据城市获取该城市下所有的县区，并动态生成县区下拉列表。
将用户选择的省市县信息进行合并处理，可以通过隐藏域等方式将其提交给后台。

具体操作步骤

下面是我编写的一个简单示例程序，来实现简单的省市县三级下拉联动效果。

HTML结构

首先，我们需要编写HTML结构，这里我写了三个下拉列表，分别用于选择省份、城市和县区，还有一个隐藏的文本框用于存储用户选择的地址信息。

<select id="province">
  <option value="">请选择省份</option>
</select> 
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="county">
  <option value="">请选择县区</option>
</select>
<input type="hidden" id="address" name="address" value="">

JS代码

接下来，我们需要编写JS代码来实现下拉列表的联动效果。代码中首先定义了一个包含省份、城市和县区信息的JSON对象，然后根据这个对象生成省份选项，当用户选择省份时，动态生成对应城市的选项，当用户选择城市时，动态生成对应县区的选项。

// 地址数据（省份、城市、县区）
var addressData = [
  {
    name: '湖南省',
    cities: [
      {
        name: '长沙市',
        counties: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区']
      },
      {
        name: '株洲市',
        counties: ['荷塘区', '芦淞区', '石峰区', '天元区', '醴陵市']
      },
      {
        name: '湘潭市',
        counties: ['雨湖区', '岳塘区', '湘乡市', '韶山市']
      }
    ]
  },
  {
    name: '广东省',
    cities: [
      {
        name: '广州市',
        counties: ['荔湾区', '越秀区', '海珠区', '天河区', '白云区']
      },
      {
        name: '深圳市',
        counties: ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区']
      },
      {
        name: '珠海市',
        counties: ['香洲区', '斗门区', '金湾区']
      }
    ]
  }
];

// 获取省份下拉框
var provinceSelect = document.getElementById('province');
// 动态生成省份选项
for (var i = 0; i < addressData.length; i++) {
  var provinceOption = document.createElement('option');
  provinceOption.innerHTML = addressData[i].name;
  provinceSelect.appendChild(provinceOption);
}

// 城市下拉框的change事件处理函数
function citySelectChange() {
  // 获取省份和城市选项
  var provinceValue = provinceSelect.value;
  var citySelect = document.getElementById('city');
  var cityValue = citySelect.value;
  // 去掉之前生成的选项
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份和城市生成县区选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      for (var j = 0; j < addressData[i].cities.length; j++) {
        if (addressData[i].cities[j].name === cityValue) {
          var counties = addressData[i].cities[j].counties;
          for (var k = 0; k < counties.length; k++) {
            var countyOption = document.createElement('option');
            countyOption.innerHTML = counties[k];
            countySelect.appendChild(countyOption);
          }
          break;
        }
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + cityValue + '-' + countySelect.value;
}

// 省份下拉框的change事件处理函数
function provinceSelectChange() {
  // 获取省份选项
  var provinceSelect = this;
  var provinceValue = provinceSelect.value;
  // 去掉之前生成的选项
  var citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份生成城市选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      var cities = addressData[i].cities;
      for (var j = 0; j < cities.length; j++) {
        var cityOption = document.createElement('option');
        cityOption.innerHTML = cities[j].name;
        citySelect.appendChild(cityOption);
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + citySelect.value + '-' + countySelect.value;
  // 给城市下拉框绑定change事件
  citySelect.onchange = citySelectChange;
}

// 给省份下拉框绑定change事件
provinceSelect.onchange = provinceSelectChange;

示例说明

下面我来介绍一下两个具体的示例。

示例1：使用JSON数据生成省份、城市和县区选项

在这个示例中，我直接使用一个包含省份、城市和县区信息的JSON对象，根据这个对象生成省份、城市和县区选项。

// 地址数据（省份、城市、县区）
var addressData = [
  {
    name: '湖南省',
    cities: [
      {
        name: '长沙市',
        counties: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区']
      },
      {
        name: '株洲市',
        counties: ['荷塘区', '芦淞区', '石峰区', '天元区', '醴陵市']
      },
      {
        name: '湘潭市',
        counties: ['雨湖区', '岳塘区', '湘乡市', '韶山市']
      }
    ]
  },
  {
    name: '广东省',
    cities: [
      {
        name: '广州市',
        counties: ['荔湾区', '越秀区', '海珠区', '天河区', '白云区']
      },
      {
        name: '深圳市',
        counties: ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区']
      },
      {
        name: '珠海市',
        counties: ['香洲区', '斗门区', '金湾区']
      }
    ]
  }
];

// 获取省份下拉框
var provinceSelect = document.getElementById('province');
// 动态生成省份选项
for (var i = 0; i < addressData.length; i++) {
  var provinceOption = document.createElement('option');
  provinceOption.innerHTML = addressData[i].name;
  provinceSelect.appendChild(provinceOption);
}

// 城市下拉框的change事件处理函数
function citySelectChange() {
  // 获取省份和城市选项
  var provinceValue = provinceSelect.value;
  var citySelect = document.getElementById('city');
  var cityValue = citySelect.value;
  // 去掉之前生成的选项
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份和城市生成县区选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      for (var j = 0; j < addressData[i].cities.length; j++) {
        if (addressData[i].cities[j].name === cityValue) {
          var counties = addressData[i].cities[j].counties;
          for (var k = 0; k < counties.length; k++) {
            var countyOption = document.createElement('option');
            countyOption.innerHTML = counties[k];
            countySelect.appendChild(countyOption);
          }
          break;
        }
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + cityValue + '-' + countySelect.value;
}

// 省份下拉框的change事件处理函数
function provinceSelectChange() {
  // 获取省份选项
  var provinceSelect = this;
  var provinceValue = provinceSelect.value;
  // 去掉之前生成的选项
  var citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  var countySelect = document.getElementById('county');
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  // 根据省份生成城市选项
  for (var i = 0; i < addressData.length; i++) {
    if (addressData[i].name === provinceValue) {
      var cities = addressData[i].cities;
      for (var j = 0; j < cities.length; j++) {
        var cityOption = document.createElement('option');
        cityOption.innerHTML = cities[j].name;
        citySelect.appendChild(cityOption);
      }
      break;
    }
  }
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + citySelect.value + '-' + countySelect.value;
  // 给城市下拉框绑定change事件
  citySelect.onchange = citySelectChange;
}

// 给省份下拉框绑定change事件
provinceSelect.onchange = provinceSelectChange;

示例2：使用AJAX从后台获取省份、城市和县区数据

在这个示例中，我通过AJAX请求从后台获取省份、城市和县区数据，然后根据这个数据生成省份、城市和县区选项。

// 获取省份下拉框
var provinceSelect = document.getElementById('province');

// 根据地址获取省份、城市、县区数据
function getAddressData(callback) {
  // AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        callback(result);
      }
    }
  };
  xhr.open('GET', '/getAddressData', true);
  xhr.send();
}

// 动态生成省份选项
getAddressData(function(data) {
  var provinces = data.provinces;
  for (var i = 0; i < provinces.length; i++) {
    var provinceOption = document.createElement('option');
    provinceOption.innerHTML = provinces[i];
    provinceSelect.appendChild(provinceOption);
  }
});

// 城市下拉框的change事件处理函数
function citySelectChange() {
  // 获取省份和城市选项
  var provinceValue = provinceSelect.value;
  var citySelect = document.getElementById('city');
  var cityValue = citySelect.value;
  // AJAX请求，根据省份和城市获取县区数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        var counties = result.counties;
        var countySelect = document.getElementById('county');
        countySelect.innerHTML = '<option value="">请选择县区</option>';
        for (var i = 0; i < counties.length; i++) {
          var countyOption = document.createElement('option');
          countyOption.innerHTML = counties[i];
          countySelect.appendChild(countyOption);
        }
      }
    }
  };
  xhr.open('GET', '/getCountyData?province=' + encodeURIComponent(provinceValue) + '&city=' + encodeURIComponent(cityValue), true);
  xhr.send();
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + cityValue + '-' + countySelect.value;
}

// 省份下拉框的change事件处理函数
function provinceSelectChange() {
  // 获取省份选项
  var provinceSelect = this;
  var provinceValue = provinceSelect.value;
  // AJAX请求，根据省份获取城市数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        var cities = result.cities;
        var citySelect = document.getElementById('city');
        var countySelect = document.getElementById('county');
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        countySelect.innerHTML = '<option value="">请选择县区</option>';
        for (var i = 0; i < cities.length; i++) {
          var cityOption = document.createElement('option');
          cityOption.innerHTML = cities[i];
          citySelect.appendChild(cityOption);
        }
        // 给城市下拉框绑定change事件
        citySelect.onchange = citySelectChange;
      }
    }
  };
  xhr.open('GET', '/getCityData?province=' + encodeURIComponent(provinceValue), true);
  xhr.send();
  // 更新隐藏域的值
  document.getElementById('address').value = provinceValue + '-' + document.getElementById('city').value + '-' + document.getElementById('county').value;
}

// 给省份下拉框绑定change事件
provinceSelect.onchange = provinceSelectChange;

以上就是我对于JS实现省市县三级下拉联动的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现省市县三级下拉联动 - Python技术站

JS实现省市县三级下拉联动

实现思路

具体操作步骤

示例1：使用JSON数据生成省份、城市和县区选项

示例2：使用AJAX从后台获取省份、城市和县区数据

相关文章