JavaScript picker, optimized f

cxPicker 是适用于移动端 web 的联级选择器插件，支持单列、多列、联动等多种数据格式。

原生 JavaScript 编写，不依赖其他库或框架。

兼容性：

Demo: https://ciaoca.github.io/cxPicker/

<link rel="stylesheet" href="cxpicker.css"> 载入 JavaScript 文件

<script src="cxpicker.js"></script> 调用 cxPicker

// 设置数据并显示选择器 cxPicker({ data: [ ['a1', 'a2'], ['b1', 'b2'], // 更多列选项 ], value: ['a1', 'b2'], // 可选参数，选择器的默认值 callback: function(result) { console.log(result); } }); 设置全局默认值

cxPicker.defaults.jsonName = 'name'; 参数说明

cxPicker({ data: [ ['选项 1-1', '选项 1-2'], ['选项 2-1', '选项 2-2'] ] }); 2. 标题与值不同

cxPicker({ data: [ [ {n: '选项 1-1', v: '101'}, {n: '选项 1-2', v: '102'} ], [ {n: '选项 2-1', v: '201'}, {n: '选项 2-2', v: '202'} ] ] }); 3. 联动数据

cxPicker({ data: [ [ {n: '北京'}, {n: '上海', s: [ {n: '黄浦区'}, {n: '徐汇区'}, {n: '长宁区'}, {n: '静安区'}, {n: '浦东新区'} ]}, {n: '浙江', s: [ {n: '杭州', s: [ {n: '上城区'}, {n: '西湖区'}, {n: '余杭区'} ]}, {n: '宁波', s: [ {n: '海曙区'}, {n: '江北区'}, {n: '北仑区'} ]} ]} ] ], jsonValue: 'n', // 不区分标题与值 selectLength: 3 // 设定为三个选项组 }); 多种数据格式混用的注意事项 当有一组数据为联动的格式时，其之后的数据将会被忽略。

例如，在用于选择日期使用时，由于每个月份的天数不同，所以存在联动的情况，需在月份的选项中配置天数选项。那么在月份之后，不能在添加其他的选项。

cxPicker 是偏向于通用的选择器插件，并未对日期/时间选择有专门的优化。

cxPicker({ data: [ [ {n: '2020年', v: 2020}, {n: '2021年', v: 2021}, {n: '2022年', v: 2022} ], [ {n:'1月', v:1, s:[1, 2, .., 31]}, {n:'2月', v:2, s:[1, 2, .., 28]}, {n:'3月', v:3, s:[1, 2, .., 31]}, {n:'4月', v:4, s:[1, 2, .., 30]}, ... ], [1, 2, 3, .., 31], // × 注意：这组数据会被忽略 ] }) callback 返回结果

{ callback: function(result) { console.log(result); /* result = { label: ['name-1', 'name-2'], value: ['value-1', 'value-2'] } */ } }