html级联选择器,HUI - picker (级联选择器)

HUI picker使用方法

1、引用 hui-picker.js

2、创建触发dom元素，例如选择时间

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开始；

完整演示代码html>

HUI Picker

HUI Picker

演示样例

选择性别

选择地区

/* 普通选择器 非关联型绑定 */

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);