基于citypicker做四级联动,数据异步获取,动态赋值

所属分类:输入-选择框

 22967  291  查看评论 (5)
分享到微信朋友圈
X
基于citypicker做四级联动,数据异步获取,动态赋值 ie兼容9
$('#div').picker({
       placeholder:"请选择文件1231位置",
       data: function (type, code, callback) {
           console.log(type);
           console.log(code);
           // 有需要可换成 ajax... 可根据参数动态获取,格式要按返回
           if (type == 'level1') {
               return callback([{
                   code: "89",
                   name: "财务部"
               }, {
                   code: "90",
                   name: "技术部"
               }, {
                   code: "91",
                   name: "总经理室"
               }]);
           } else if (type == 'level2') {
               return callback([{
                   code: "1",
                   name: "文件柜11"
               }, {
                   code: "2",
                   name: "文件柜12"
               }, {
                   code: "3",
                   name: "文件柜13"
               }]);
           } else if (type == 'level3') {
               return callback([{
                   code: "1",
                   name: "21文件箱"
               }, {
                   code: "2",
                   name: "22文件箱"
               }, {
                   code: "3",
                   name: "23文件箱"
               }]);
           } else if (type == 'level4') {
               return callback([{
                   code: "1",
                   name: "31文件格"
               }, {
                   code: "2",
                   name: "32文件格"
               }, {
                   code: "3",
                   name: "33文件格"
               }]);
           }
       },
       level1: {name: '财务部', code: '89'},// 修改时传入
       level2: {name: '文件柜12', code: '2'},// 修改时传入
       level3: {name: '22文件箱', code: '2'},// 修改时传入
       level4: {name: '33文件格', code: '3'},// 修改时传入
       callback: function (data) {
           // 数据回调
           console.log(data);
       }
   });

       // 获取哪个传那个 level1 level2 level3 level4
      $('#div').data('picker').getCode('level4'));
   

// 销毁
       $('#div').picker('destroy');
   

  // 重置
       $('#div').picker('reset');
相关插件-选择框

jQuery模拟select下拉框插件SelectBox

自动模拟框,并且可以手动输入,可以模糊性查找
  选择框
 41078  341

移动端弹出列表选择框

html5制作动画弹出下拉菜单选择,适用于手机端的动态弹出选择下拉菜单代码。
  选择框
 44721  352

radio checkbox

利用css3技术,实现替代浏览器自带的radio checkbox功能。不用js技术,纯轻量级的。
  选择框
 30763  312

复选框全选反选取消(界面有点难看,但功能绝对OK)

可实现全选框全选反选取消等,选了可删除。需引用jqueryDOM结构浅显易改。
  选择框
 30255  330

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    默诺*_* 0
    2023/10/12 10:20:02
    能否把未压缩的js也放上去啊,现在有bug,选过的第三极菜单,再回去看选中了两个。 回复
    晓彬哟。 0
    2019/6/27 9:20:36
    感谢楼主分享! 回复
    oceanwu 0
    2019/4/22 11:21:59
    合格路人甲 0
    2019/1/15 14:06:52
    麻烦问一下,这个修改时传入?应该怎么传入啊? 回复
    合格路人甲 0
    2019/1/14 13:17:37
    额?应该怎么用啊! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复