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

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

jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址使用方法 npm install v-distpick ...
js原生，省市区三级联动插件
js原生,省市区三级联动插件 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
jquery省市区三级联动插件，无ajax
是否觉得使用ajax+数据库来搞省市区三级联动很麻烦?不妨试试纯js实现吧.今天无意间在网上找到个省市区的jason数据,js写的,索性自己写了一个新的,以jquery插件形式实现,代码比网上找的小了 ...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
插件原生js 省市区三级联动源码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue——省市区三级联动demo
最近学习vue,想着写一写demo练习练习. 此demo是省市区的三级联动,像这样的场景我们经常看到.我也是刚开始写没有头绪,然后多方查资料. 写此demo时踩过的坑: 1.数据:我们希望后台给我们的 ...
jquery省市区ajax,jQuery省市区三级联动
jQuery省市区三级联动演示下载,本文将给大家介绍一款非常好用的省市区三级联动插件:cityselect.通过这款城市联动插件,省市区三级联动cityselect插件可以无刷新省市区联动效果. 查看 ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...

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

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

最新文章

热门文章