html移动端选择器插件,纯原生Javascript实现的移动端多级选择器插件

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

原生Javascript实现的移动端多级选择器，可通过配置实现多级联动。支持AMD模块化加载方式。压缩后JS文件只有4.07KB。

先上插件github地址：

效果图：

常用的多级联动选择：

普通日期选择：

多行多选择器：

使用：

引入依赖

在页面中引入：1pickerView.css和pickerView.js

初始化：1var pickerView = new PickerView(opts);

opts是可选的配置参数，具体如下：

selector

必填项，是触发选择器的dom元素id值。

title

选择器的标题。

col

col是选择器每一列的配置参数，具体格式如下：1

2

3

4

5

6

7

8

9

10

11

12

13{

cols:[

{

values: ['广东']

},{

currVal: '佛山', //currVal是默认当前项，可选

values: ['深圳','佛山']

},{

currVal: '三水',

values: ['顺德','三水','高明','禅城','南海']

}

]

}

其中values数组里是参数列的每一个值，currVal是设置的默认当前项，必须是values数组里面的某一项值，可选，没设置默认第一项为当前项。另外，cols里面配置的对象项数，决定了选择器显示的列数。

onOptionSelected

选择器中某一列的项被选中后触发的回调函数，会回传三个参数：colIndex 被触发选中的列下标，从0开始计算

selectedIndex 被触发选中的项下标，从0开始计算

selectedValue 被触发选中的项的值

通过onOptionSelected结合pickerView.prototype.updateCol函数(下面介绍该函数)，可以实现多级联动。

onConfirm

选择器确定按钮被点击后触发的回调函数，会回传一个参数：values 顺序返回的全部选中值数组

onCancel

选择器取消按钮被点击后触发的回调函数，无传参。

pickerView.prototype.updateCol(colIndex, colContent)

是个可选的更新列内容的函数。其中：colIndex 需要更新的列下标，从0开始计算

colContent 被替换的列的内容，格式可以参照上面的cols参数，例子如下：1

2

3

4pickerView.updateCol(2,{

currVal: '宝安',

values: ['南山','宝安','福田','罗湖','龙岗','盐田']

})；

上面例子是给新建的pickerView对象更新第三列的选择内容。

具体的完整demo，可以参照