city-picker ajax,基于citypicker实现四级联动菜单代码
特效描述：基于citypicker实现 四级联动 菜单代码。基于citypicker实现四级联动菜单代码
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
参照、修改citypicker做四级联动，数据异步获取，动态赋值
扩展需求可修改源码 【可能有bug，欢迎评论】
by XG.H
销毁
重置
获取code
$('#div').droppicker({
placeholder:"请选择文件1231位置",
data: function (type, code, callback) {
console.log(type);
console.log(code);
// 有需要可换成 ajax... 可根据参数动态获取，格式要按返回
if (type == 'droplevel1') {
return callback([{
code: "89",
name: "财务部"
}, {
code: "90",
name: "技术部"
}, {
code: "91",
name: "总经理室"
}]);
} else if (type == 'droplevel2') {
return callback([{
code: "1",
name: "文件柜11"
}, {
code: "2",
name: "文件柜12"
}, {
code: "3",
name: "文件柜13"
}]);
} else if (type == 'droplevel3') {
return callback([{
code: "1",
name: "21文件箱"
}, {
code: "2",
name: "22文件箱"
}, {
code: "3",
name: "23文件箱"
}]);
} else if (type == 'droplevel4') {
return callback([{
code: "1",
name: "31文件格"
}, {
code: "2",
name: "32文件格"
}, {
code: "3",
name: "33文件格"
}]);
}
},
droplevel1: {name: '财务部', code: '89'},// 修改时传入
droplevel2: {name: '文件柜12', code: '2'},// 修改时传入
droplevel3: {name: '22文件箱', code: '2'},// 修改时传入
droplevel4: {name: '33文件格', code: '3'},// 修改时传入
callback: function (data) {
// 数据回调
console.log(data);
}
});
function getcode() {
// 获取哪个传那个 droplevel1 droplevel2 droplevel3 droplevel4
alert($('#div').data('droppicker').getCode('droplevel4'));
}
function destroy() {
$('#div').droppicker('destroy');
}
function reset() {
$('#div').droppicker('reset');
}