省份地区三级联动详细讲解

好久没有自己更新文章了，一直转载大佬们的文章。
上周休息由于劳累，然后一觉睡到晚上了，醒来之后，把家里打扫了打扫。把衣服洗了洗，然后又开始睡了。不要问我，问我就是睡觉真舒服，哈哈哈，回归正题。今天我们用js制作一个省级地区三级联动，省市区，这三个由大到小，自动更新后面市区，简单来说就是我选择了省，他会自动选定市和区两部分。在web开发中，地区联动是很常见的功能，在我们购物填写地址的时候，在买外卖的时候，我们都很常见到。今天上午我去打了第三针疫苗，然后我之前用的河北健康码，现在得用健康陕西，填写信息的时候就用到这个三级联动了，所以今天写一篇这样的文章，一个是缘分，另一个就是巩固学习。大家都知道，代码这个东西，一天不打手就生。我们用js制作地区三级联动，得先编写html里面的下拉列表：

<!-- 微信公众号：她的码农 -->
    <select id="sheng">
      <option value="-1">请选择</option>
    </select>
    <select id="shi"></select>
    <select id="qu"></select>
    <script>
    <!-- 编写js代码 -->
</script>

大家很好奇就是option里面的value值为什么是-1。因为option是下拉列表里面的选择项，里面的value就是对应地区数组下标，数组下标是从0开始，我们从-1开始，就可以避免将其锁定为某个地区。
接下来我们要制作的就是利用数组保留地区数据。

<script>
// 微信公众号:她的码农
      // 省份数组
      var shengArr=['陕西','河北'];
      // 市数组
      var shiArr=[        ['西安市','宝鸡市'],
        ['石家庄市','邢台市']
      ];
      // 区数组
      var quArr=[        [          ['雁塔区','莲湖区'],
          ['渭滨区','陈仓区','金台区']
        ],[          ['桥西区','长安区'],
          ['桥东区','桥西区']
        ]
      ];
</script>

编写数组的时候还搜了搜区，大家一看我这就知道我（这娃，地理是真不行，哈哈哈）。
在前面我们利用shengArr这个一维数组，保存了省的数据。后面的市和区我们利用shiArr二维数组保存了省区对应下的市，同理quArr就用到了三维数组。我们举个例子。比如陕西shengArr【1】保存的是陕西省下面所有的城市。接下来我们要做的就是让它自动创建省份下拉菜单：

      function createOption(obj,data){
        for(var i in data){
          var op=new Option(data[i],i);
          // 创建下拉菜单中的option
          obj.options.add(op);
          // 将获取到的选项添加到下拉菜单中
        }
      }
      var sheng=document.getElementById('sheng');
      // 获取省份元素
      createOption(sheng,shengArr);

我们用createoption（）函数创建指定的下拉菜单选项。参数obj用于表示下拉列表菜单的元素对象，参数data用于表示一维数组保存的下拉列表选项。我们的new用于实例化option对象创建<select>下的<option>选项，后面options对象的add（）方法将创建的<option>选项添加到指定的下拉菜单obj中。
我们现在做的可以直接选择省份了，但是还不能实现三级联动。我们想要的是，选择完省份城市地区都出来了。

接下来我们要实现城市的自动选项。当我们选择完省份，自动出现城市区域。

// 微信公众号:她的码农
var shi=document.getElementById('shi');
      // 获取市的下拉菜单元素对象
      // 下面为省份下拉菜单事件
      sheng.onchange=function(){
        shi.options.length=0;
        // clear城市下的所有原有的option
        createOption(shi,shiArr[sheng.value]);
      };

我们看了之后还是不能实现三级联动，只有我们选择了省会触发事件，可以直接出现城市，但是城市内的区还是没有显示，我们先遍历一下数组，给城市添加事件再试一下。

var qu=document.getElementById('qu');
      // 通过id获取城市下的区域
      shi.onchange=function(){
        // 添加事件
        qu.options.length=0;
        // clear区域原有的option
        createOption(qu,quArr[sheng.value][shi.value]);
      };

这样的话，我们选择省份触发事件出现城市，但是我们不改变城市他是不会出现城市下的区域，我们怎么办呢？
所以我们上面的代码还是有一些错误，我们需要改一改。我们修改一下省份的事件给他来一个判断。

if(sheng.value>=0){
          shi.onchange();
          // 自动添加城市对应下的区域
        }else{
          qu.options.length=0;
          // clear区域下原有的option
        }

接下来我们利用css给他简单美化一下就可以了。
总结：今天制作省份地区的三级联动，主要掌握html里面的下拉列表select和列表项option。还需要掌握一维数组，二维数组，还有遍历数组，获取id，实例化对象，添加change事件，clear（清除）option等。