jQuery 实现省市区三级联动

引言

项目开发中，经常会遇到城市三级联动的需求，这里总结一下使用 jQuery 方式实现三级联动

首先，城市数据有可能需要放在前端代码中，所以需要把数据单独放到一个 js 文件中，然后在页面引入

1.引入 jQuery 和 城市数据文件

<!--  引入 jQuery -->
<script src="https://probe.bjmantis.net/chat/jquery-1.12.4.min.js"></script>
<!--  引入城市数据 -->
<script type="application/javascript" src="provinceData.js"></script>

2.页面布局

<div class="list">
  <select name="" id="selProvince">
    <option value="">请选择</option>
  </select>
  <select name="" id="selCity">
    <option value="">请选择</option>
  </select>
  <select name="" id="selCountry">
    <option value="">请选择</option>
  </select>
</div>

3. js 逻辑

$(function () {
    // 使用引入的数据
    var provinceList = provinceData
    var iNum1
    var iNum2
    console.log(provinceList)
    // 城市及联
    for (var i = 0; i < provinceList.length; i++) {
      $('#selProvince').append('<option>' + provinceList[i].name + '</option>')
    }
    $('#selProvince').change(function () {
      $('#selCity').children().not(':eq(0)').remove()
      iNum1 = $(this).children('option:selected').index()
      var aaCity = provinceList[iNum1 - 1].children
      for (var j = 0; j < aaCity.length; j++) {
        $('#selCity').append('<option>' + aaCity[j].name + '</option>')
      }
    })
    $('#selCity').change(function () {
      $('#selCountry').children().not(':eq(0)').remove()
      iNum2 = $(this).children('option:selected').index()
      var aaCountry = provinceList[iNum1 - 1].children[iNum2 - 1].children
      for (var k = 0; k < aaCountry.length; k++) {
        $('#selCountry').append('<option>' + aaCountry[k].name + '</option>')
      }
    })
  })

4.js 数据文件

文件地址以及完整代码：城市数据

• 本文作者： Gladysdrea
• 本文链接： https://gladysdrea.github.io/blogs/2021/07/12/jQuery系列/jQuery实现省市区三级联动/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！