jQuery 实现省市区三级联动

引言

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

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

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

2.页面布局

  
    请选择
  
  
    请选择
  
  
    请选择
  

3. js 逻辑

$(function () {
    // 使用引入的数据
    var provinceList = provinceData
    var iNum1
    var iNum2
    console.log(provinceList)
    // 城市及联
    for (var i = 0; i < provinceList.length; i++) {
      $('#selProvince').append('' + provinceList[i].name + '')
    }
    $('#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('' + aaCity[j].name + '')
      }
    })
    $('#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('' + aaCountry[k].name + '')
      }
    })
  })

4.js 数据文件

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