html5手机移动端三级联动城市选择器,jquery移动端省市县（区）三级联动插件

最近刚做完一个版本的项目，闲暇时间，就索性把项目中需要用到的插件都自己写了一个，毕竟自己动手丰衣足食才是最重要，自己写的，可以应对各种项目需求，今天又把手机端的省市区三级联动选择功能编写了一个插件出来，代码很简单，样式也是应用的跟日期时间选择插件的一样。写省市区三级联动插件的关键是在于你如何编写自己的“省市县(区)”json文件，你要是把数据格式写对了，可以很轻松的写一省市区插件出来。在项目里，我把json文件里的数据都压缩了一遍直接放到了插件的.js文件里，自己觉得这样更好，减少插件的关联文件，就一个.js和一个.css文件，一目了然。

下面我把代码放出来，需要的小伙伴们可以粘贴复制哦。(插件没有bug，可以放心使用，喜欢的给个赞哦(o^*^o)!!!)

使用方法

HTML:

//存放选择的省市区文本值

JS:

$(".city").pickArea({

'speed':2

});

jquery.pickArea.js

/*

* pluginName:pickCity,

* author:[email protected]

* Individual contact method:986372959(It's my QQ)

* date:2017/09/07 18:45:00

* */

;(function($,window,document,undefined){

'use strict'; //严格模式，提高效率

var pluginName = 'pickArea', //定义插件的名字

defaults = {},//定义一个默认的参数

liH,//每一个li的高度

$list,//滑动列表

globalThis_launchHtml,

data,

pluginThis;//指代指向plugin的this

var global = {

options:''

};

function Plugin(options){ //创建构造函

//this -- Plugin对象

pluginThis = this;

this.options = options;

this.init(); //初始化

}

Plugin.prototype = {

init:function(){

global.options = this.options;

data = dataJson.data;//获取数据 data[i].code省code data[i].name省name

console.log(data)

this.render(); //渲染

},

render:function(){

//this -- Plugin对象

var str = '

'+

'

'+

'

'+

'取消'+

'

'+

'

设置地区

'+

'

'+

'确定'+

'

'+

'

'+

'

'+

'

'+

'

'

• '+

'

'+

'

'

'

'+

'

'+

'

'

• '+

'

'+

'

'

'

'+

'

'+

'

'

• '+

'

'+

'

'

'

'+

'

'+

'

'+

'

$