效果图
使用方法
1、引用 hui-picker.js
2、创建触发dom元素，例如
<button type="button" class="hui-button hui-button-large" id="btn1">选择时间</button
3、获取picker对象，如：
var picker = new huiPicker(’#picker’, function(){});
4、设置菜单层级
5、绑定数据（关联数据及非关联数据）
huiPicker(selector, callBack)
参数1 : selector 单一元素选择器
参数2 : 点击确定按钮执行的回调函数
level属性
level属性用于设置级联菜单的层级数，默认1；如:
picker3.level = 3; //设置联动层级为3层
bindData(levelIndex, data) 绑定非关联数据
功能：为菜单绑定非关联数据；
参数：
1、菜单层级， con0开始；
2、一维数组，格式 new Array({value:xx, text},…);
如：
var years = new Array(); for(var i = 2000; i <= 2017; i++){years.push({value:i, text:i});} picker1.bindData(0, years);
bindRelevanceData(cities);绑定关联性数据
功能：为菜单绑定非关联数据；
参数：关联性多维数组，格式：
var cities = [{ value: '100000', text: '陕西省', children: [ { value: '100001', text: '西安市' }, { value: '100002', text: '宝鸡市' } ] } ];
picker.getText(index);获取选中的文本
功能：获取picker对象选中的文本；
参数：菜单层级，从0开始；
picker.getVal(index);获取选中的值
功能：获取picker对象选中的值；
参数：菜单层级，从0开始；
完整演示代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>HUI Picker</title> <link rel="stylesheet" type="text/css" href="../css/hui.css" /> </head> <body> <header class="hui-header"> <div id="hui-back"></div> <h1>HUI Picker</h1> </header> <div class="hui-wrap"> <div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div> <div style="padding:28px;"> <button type="button" class="hui-button hui-button-large" id="btn1">选择性别</button> <button type="button" class="hui-button hui-button-large" id="btn2" style="margin-top:20px;">选择地区</button> </div> </div> <script type="text/javascript" src="../js/hui.js" charset="utf-8"></script> <script type="text/javascript" src="../js/hui-picker.js" charset="utf-8"></script> <script type="text/javascript" src="../js/cities.js" charset="utf-8"></script> <script type="text/javascript"> /* 普通选择器 非关联型绑定 */ var picker1 = new huiPicker('#btn1', function(){ var val = picker1.getVal(0); var txt = picker1.getText(0); hui('#btn1').html(txt + '[' + val + ']'); }); picker1.bindData(0, [{value:1, text:'男'},{value:2, text:'女'}]); /* 地区选择， 关联型数据 */ var picker2 = new huiPicker('#btn2', function(){ var sheng = picker2.getText(0); var shi = picker2.getText(1); var qu = picker2.getText(2); hui('#btn2').html(sheng + shi + qu); }); picker2.level = 3; //cities 数据来源于 cities.js picker2.bindRelevanceData(cities); </script> </body> </html>
