html手机联动滚动代码,移动端的jQuery二级联动滑动选择插件mobile selector

一款移动端的jQuery二级联动滑动选择插件mobile selector，分单选、二级联动和非联动三种方式可供选择，弹出层是固定在页面底部的，所以比较适合移动端来使用，适用于表单有城市选择或自定义内容选项的页面场景，喜欢的童鞋请收下吧。

查看演示

下载资源：

44

次 下载资源

下载积分：

20

积分

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

页面的body部分，设置好单选、二级联动和非联动三种方式的容器即可，代码如下：

二级模拟选择插件

二级城市联动选择

二级非联动选择

单级选择

两级联动选择插件调用：

$('.select-value').mPicker({

//级别

level:2,

//需要渲染的json，二级联动的需要嵌套子元素，有一定的json格式要求

dataJson:dataJson,

//true:联动

Linkage:true,

//显示行数

rows:6,

//默认值填充

idDefault:true,

//分割符号

splitStr:'-',

//头部代码

header:'两级联动选择插件',

confirm:function(){

//更新json

this.container.data('mPicker').updateData(level3);

//console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));

},

cancel:function(){

//console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));

}

})

//返回的实例对象，

//包含showPicker,hide,updateData等方法

// var method= $('.select-value').data('mPicker');

// console.info(method)

// method.showPicker();

// method.hide(function(){

// console.info(this)

// });

页面的底部，需引入jQuery库和一个JS文件，代码如下：