三级城市联动的实现

数据：

// 城市列表
var data = [
  {
    "code": "110000",
    "name": "北京市",
    "parent": "100000",
    "children": [
      {
        "code": "110101",
        "name": "东城区",
        "parent": "110100",
        "children": null
      },
      {
        "code": "110102",
        "name": "西城区",
        "parent": "110100",
        "children": null
      },
      {
        "code": "110105",
        "name": "朝阳区",
        "parent": "110100",
        "children": [
          {
            "code": "11010501",
            "name": "朝阳区111",
            "parent": "110105",
            "children": null
          }
        ]

      },
    ]
  }
]

1.遍历省级数据

我们可以通过以下几步来遍历省级数据：
  1.导入数据
  2.在body标签创建三个下拉框
  3.分别获取这三个下拉框
  4.遍历数据
  5.添加到省级下拉框中

2.二级联动的实现

二级联动在遍历省级基础上又多了些步骤
具体实现步骤如下：
  1.创建一个数组，用于存放市级数据
  2.给省级下拉框绑定事件
  3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中
  4.遍历市级数据

注意： 在省级数据发生变化时，要清空市级的数据，不然市级的数据会叠加在一起，所以要加上这句：

shi.innerHTML="<option value=\"\">---请选择---</option>"

3.三级联动的实现

三级联动与二级联动的实现几乎一样，注意数据发生变化时所要清空相应的数据即可。

4.最终代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1.导入数据 -->
    <script src="./area-json.js"></script>
  </head>
  <body>
    <!-- 2.在body标签创建三个下拉框 -->
    省：<select name="" id="sheng">
      <option value="">---请选择---</option>
    </select>
    市：<select name="" id="shi">
      <option value="">---请选择---</option>
    </select>
    区：<select name="" id="qu">
      <option value="">---请选择---</option>
    </select>
  </body>
  <script>
    // 3.分别获取这三个下拉框
    var sheng = document.getElementById('sheng')
    console.log(sheng)
    var shi = document.getElementById('shi')
    var qu = document.getElementById('qu')
    var frag = document.createDocumentFragment()
    console.log(frag)
    // 4.遍历数据

    for (var i = 0; i < data.length; i++) {
      console.log(data[i].name)
      var option = document.createElement('option')
      console.log(option)
      option.innerText = data[i].name
      option.value = data[i].code
      frag.appendChild(option)
    }
    // 5.添加到省级下拉框中
    sheng.appendChild(frag)

    // 1.创建一个数组，用于存放市级数据
    var shiArr = []
    // 2.给省级下拉框绑定事件,onchang(当省级数据变化时，触发该事件)
    sheng.onchange = function () {
      //清空市级与区级中的数据，防止重复
      shi.innerHTML = '<option value="">---请选择---</option>'
      qu.innerHTML = '<option value="">---请选择---</option>'
      // 3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中
      // 4.遍历数组，将数组中的数据添加到市级下拉框中
      for (var i = 0; i < data.length; i++) {
        // 判断当前省级下拉框的选中的值与数据中的code值是否相等
        if (data[i].code == this.value) {
          // 将市级数据存放到数组中
          shiArr = data[i].children
          // 遍历数组，将数组中的数据添加到市级下拉框中
          break
        }
      }
      // 4.遍历市级数据
      for (var j = 0; j < shiArr.length; j++) {
        var option = document.createElement('option')
        option.innerHTML = shiArr[j].name
        option.value = shiArr[j].code
        frag.appendChild(option)
      }
      shi.appendChild(frag)
    }
    var quArr = []
    shi.onchange = function () {
      qu.innerHTML = '<option value="">---请选择---</option>'
      for (var i = 0; i < shiArr.length; i++) {
        if (shiArr[i].code == this.value) {
          quArr = shiArr[i].children
          break
        }
      }
      for (var j = 0; j < quArr.length; j++) {
        var option = document.createElement('option')
        option.innerHTML = quArr[j].name
        option.value = quArr[j].code
        frag.appendChild(option)
      }
      qu.appendChild(frag)
    }
  </script>
</html>