Cascader
介绍
一款极简风格的JavaScript级联选择器,拿来即用,不依赖任何框架
注意事项
日常开发中写的小组件,有问题请移步GitHub Issue
使用
...
<script type="text/javascript" src="dist/js/cascader.min.js"></script>
<script>
var cascader = new Cascader({
container: 'body', // => document.querySelector(container).innerHTML
width: 228, // cascader's width
callback: function (data) { // selected value callback
// {
// data: Array, //selected full data source
// value: String //selected value
// }
console.log(data);
},
defaultValue: '四川省/成都市/金牛区', //string: 四川省/成都市/金牛区 or array: [0, 0, 0]
data: [{
className: 'sichuan', // If the value is not empty, it will be set to class
value: '四川省', // value and html title
child: [{
className: 'chengdu',
value: '成都市',
child: [{
className: '',
value: '金牛区'
}, {
className: '',
value: '成华区'
}, {
className: '',
value: '锦江区'
}, {
className: '',
value: '高新区'
}, {
className: '',
value: '青羊区'
}, {
className: '',
value: '武侯区',
child: [{
className: '',
value: '桂溪街道办'
}]
}]
}]
}, {
className: 'yunnan',
value: '云南省',
child: [{
className: '',
value: '丽江市',
child: [{
className: '',
value: '古城区'
}]
}]
}, {
className: 'jiangsu',
value: '江苏省',
child: [{
className: '',
value: '南京市'
}]
}, {
className: 'guangdong',
value: '广东省',
child: [{
className: '',
value: '广州市',
child: [{
className: '',
value: '荔湾区'
}, {
className: '',
value: '越秀区'
}]
}, {
className: '',
value: '深圳市',
child: [{
className: '',
value: '南山区'
}, {
className: '',
value: '光明区'
}]
}]
}, {
className: 'ningxia',
value: '广西壮族自治区',
child: [{
className: '',
value: '南宁市'
}]
}]
});
cascader.init(); // init() current() reset()
</script>
预览

网友评论