三级联动（地址：省市区）

 JS 原生

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <select name="" id="select1"></select>
  <select name="" id="select2"></select>
  <select name="" id="select3"></select>
</body>

</html>
<script src="./area.js"></script> //引入外部省 市 区文件
<script>
  // 1先将省 市 区 分别显示在页面上 在页面加载完成后显示 会有一个默认值(默认值是第一个值)
  var sele = document.querySelectorAll("select");
  // sele[0] == 第一个下拉框
  // sele[1] == 第二个  sele[2] == 第三个

  // 获取一个省 data[0].name == 第一个省份   data[i].name == 所有省份
  // 遇见数组foreach 遇见对象forin

  // 3.1声明一个空字符串为了在循环内获取option加省分内容的标签
  var prov = "";
// 2获取所有省份
  data.forEach(function (item) {
    // 2.1item == data[0]&&data[1]....  == 数组内所有元素 == data内每个对象

    // console.log(item.name);
    // 通过string拼接创建一个标签 
    // 3.prov += "<option value='"+item.name+"'>"+item.name+"</option>"
    // ``${} 只是字符串提供的一种新的拼接方式 是es6语法
    // 3.
    prov += `<option value="${item.name}">${item.name}</option>`;

    // 3.通过dom方法创建标签 给标签设置内容和属性 添加到第一个下拉框内
    // var option = document.createElement("option");
    // option.innerText = item.name;
    // option.value = item.name;
    // sele[0].appendChild(option);
  })
  // 3.2在循环结束后得到的是所有的省份信息填写如option内的总和
  // console.log(prov);
  // 3.3将装载省份的标签添加到sele[0]内
  sele[0].innerHTML = prov;

  // 4.首先获取一个city 设置市的内容
  // data[0].city == [{name:"市"},{name:"市"},{name:"市"}]

  // 6.当第一个下一框内容发生更改时触发 
  sele[0].onchange = function () {
    // 获取选中option的索引值
    // console.log(this.selectedIndex);
    // 根据选中option的索引值来重新设置市的内容
    // var city = "";
    // data[this.selectedIndex].city.forEach(function (item) {
    //   city += `<option value="${item.name}">${item.name}</option>`;
    // })
    // sele[1].innerHTML = city
    // 8.调用函数 根据第一个下拉框的索引值来对应的获取市然后显示在页面上
    cityFun(this.selectedIndex)
    // 13. 当省发生更改的时候同时在设置区的内容更改 更改为当前省下的第一个市所对应的区
    areaFun(this.selectedIndex,0)
  }

  // 5.设置第二个下拉框的初始值 值在第一个省份下拉框更改时 会随着更改
  // 7.因为设置市会多次执行所以使用函数封装
  function cityFun(i) {
    var city = "";
    data[i].city.forEach(function (item) {
      city += `<option value="${item.name}">${item.name}</option>`;
    })
    sele[1].innerHTML = city
  }
  cityFun(0)



  // 10.设置市更改的时候让区的值跟着更改 手动操作市的时候
  sele[1].onchange = function () {
    // console.log("===");
    // console.log(sele[0].selectedIndex,sele[1].selectedIndex)
    // 12.调用的时候 让区根据当前省的下拉索引值和市的下拉索引值来获取相关的区 显示在页面上
    areaFun(sele[0].selectedIndex,sele[1].selectedIndex)
  }

  //  9.获取默认显示的第一个省的第一个市内的区 data[0].city[0].area == ["区1","区2","区3"...]
  // 11.因为区是在省或者市发生变化的时候都需要更改 所以函数封装一下
  function areaFun(a,b) {
    var area = "";
    data[a].city[b].area.forEach(function (item) {
      area += `<option value="${item}">${item}</option>`;
    })
    sele[2].innerHTML = area;
  }
  // 初始先调用执行一次
  areaFun(0,0); 
</script>

jquery 三级联动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./area.js"></script>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <select name="province" id="province">

    </select>
    <select name="city" id="city">

    </select>
    <select name="area" id="area">

    </select>
    <script>
        var str = '';
        for(var i = 0;i<data.length;i++){//遍历data,将每个省份添加到省的select框中
            str += '<option value="'+i+'">'+data[i].name+'</option>';//value对应option里的内容在data里的索引
        }
        $('#province').html(str);

        var str = '';
        for(var i =0;i<data[0].city.length;i++){//遍历当前显示的省份对应的城市的数组,把城市名添加到市的select框中
            str += '<option value="'+i+'">'+data[0].city[i].name+'</option>';
        }
        $('#city').html(str);

        var str = '';
        for(var i =0;i<data[0].city[0].area.length;i++){//遍历当前显示的省份及城市对应的区县的数组,把区县名添加到区县的select框中
            str += '<option value="'+i+'">'+data[0].city[0].area[i]+'</option>';
        }
        $('#area').html(str);

        $('#province').change(function(){
            var index = $('#province').val();
            var str = '';
            for(var i =0;i<data[index].city.length;i++){//遍历当前显示的省份对应的城市的数组,把城市名添加到市的select框中
                str += '<option value="'+i+'">'+data[index].city[i].name+'</option>';
            }
            $('#city').html(str);
            $('#city').trigger('change');//手动触发city的change事件
        })
        $('#city').change(function(){
            var index1 = $('#province').val();
            var index2 = $('#city').val();
            var str = '';
            for(var i =0;i<data[index1].city[index2].area.length;i++){//遍历当前显示的省份及城市对应的区县的数组,把区县名添加到区县的select框中
                str += '<option value="'+i+'">'+data[index1].city[index2].area[i]+'</option>';
            }
            $('#area').html(str);
        })

    </script>
</body>
</html>

jquery封装：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./area.js"></script>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <select name="province" id="province">

    </select>
    <select name="city" id="city">

    </select>
    <select name="area" id="area">

    </select>
    <script>
        function change(source,dom){
            var str = '';
            if(typeof source[0] == 'object'){
                for(var i = 0;i<source.length;i++){
                    str += '<option value="'+i+'">'+source[i].name+'</option>';
                }
            }else{
                for(var i = 0;i<source.length;i++){
                    str += '<option value="'+i+'">'+source[i]+'</option>';
                }
            }
            $(dom).html(str);
        }
        change(data,'#province');
        change(data[0].city,'#city');
        change(data[0].city[0].area,'#area');

        $('#province').change(function(){
            var index = $('#province').val();
            change(data[index].city,'#city');
            $('#city').trigger('change');//手动触发city的change事件
        })
        $('#city').change(function(){
            var index1 = $('#province').val();
            var index2 = $('#city').val();
            change(data[index1].city[index2].area,'#area')
        })

    </script>
</body>
</html>