省市区三级联动：非常好用的纯js插件

最近在做表单的时候，要用到 省市区三级联动 的插件。在网上搜了很多插件，但是感觉有的插件做的并不太好，并且有的插件省市区三个select必须在同一个div包裹下，如果不在同一个包裹下的话，就不能进行关联，个人感觉跟我要用的表单不太搭。

这里推荐个非常好用的 纯js插件，使用的时候只需要 引入这个js文件，然后 绑定三个select，作为初始化省市区的容器，位置可以随便放哪，都能够进行联动，非常方便。

1. 下面就简单的介绍下area.js的用法：

首先你需要使用script 标签引入area.js，后续很多人问我要这个js，可点击这个链接去复制文件。
设置三个select标签设置id，作为省市区的容器。
然后初始化，到这里已经结束了。

2. html使用以及初始化

//1.引入area.js文件
<script src="./area.js"></script>

// 2.html结构
<label>省：<select id="province"></select></label><br/>
<label>市：<select id="city"></select></label><br/>
<label>县：<select id="county"></select></label><br/>

//3.初始化(三个节点的id)
<script>
_init_("province", "city", "county");
</script>

3. 怎么获取省市区的value值？

这里非常的简单，直接使用jquery中的val()方法。

<script>
//jquery入口函数
$(function(){
         var a = $("#province") .val();//省
         var b = $("#city").val(); //市
         var c = $("#county").val(); //县
// 可以添加一个按钮，触发打印省市区的值
        $("#btn").click(function(){
                console.log(a,b,c);       
       });    
// 当然也可以给select添加change事件
       $("#province").bind("change", function(){
                 console.log($(this).val());
      })
});
</script>

4. 怎么设置指定的值？

比如说我想让页面一上来选中了 河南省郑州市中原区 ，很简单，直接使用jquery中的val()方法，给它设置我们指定的值。

        $("#province") .val("河南省");//省
        $("#city").val(“郑州市”); //市
        $("#county").val(“中原区”); //县

刷新页面你会发现，只选中了省，市和县都为空，同时如果此时改变了省的值，但是市和县也不能进行关联。

5. 为什么呢？这就需要我们手动触发关联

怎么触发关联呢，直接调用change()方法，给它传递索引值。

就是说我们在给它设置值的时候，每设置一次值，就要手动触发一次关联，比如：

省与市的关联，索引为1；
市与县的关联，索引为2；

          $("#province") .val("河南省");//省
         change(1);  // 触发省市关联
        $("#city").val(“郑州市”); //市
        change(2);  // 触发 市县关联
        $("#county").val(“中原区”); //县

刷新页面，显示的就是我们设置的值，河南省郑州市中原区
并且改变省或市都能进行关联下级区域，you jump I jump

6. 原先未修改的js文件存在的问题？

js文件只能哪里引用哪里才可以使用，比如说你多个页面都使用了省市区的插件，就会有问题。

但是修改过的，就不存在这样的问题，可以放心使用，同时全国省市区的数据city.json一般也不会改变，放在本地加载的速度会更快。

最后编辑于：2020.03.30 17:09:41