引言

項目開發(fā)中，經(jīng)常會遇到城市三級聯(lián)動的需求，這里總結(jié)一下使用 jQuery 方式實現(xiàn)三級聯(lián)動

首先，城市數(shù)據(jù)有可能需要放在前端代碼中，所以需要把數(shù)據(jù)單獨放到一個 js 文件中，然后在頁面引入

1.引入 jQuery 和 城市數(shù)據(jù)文件

<!--  引入 jQuery -->
<script src="https://probe.bjmantis.net/chat/jquery-1.12.4.min.js"></script>
<!--  引入城市數(shù)據(jù) -->
<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 () {
    // 使用引入的數(shù)據(jù)
    var provinceList = provinceData
    var iNum1
    var iNum2
    console.log(provinceList)
    // 城市及聯(lián)
    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 數(shù)據(jù)文件

文件地址以及完整代碼：城市數(shù)據(jù)