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

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

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

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

设置三个select标签设置id，作为省市区的容器。

然后初始化，到这里已经结束了。

2. html使用以及初始化

//1.引入area.js文件

// 2.html结构

省：

市：

县：

//3.初始化(三个节点的id)

_init_("province", "city", "county");

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

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

//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());

})

});

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一般也不会改变，放在本地加载的速度会更快。