参照、修改citypicker做四级联动，数据异步获取，动态赋值_citypicker赋值,city-picker赋值资源-CSDN文库

共5个文件

js：2个

html：1个

css：1个

四级联动

5星 · 超过95%的资源需积分: 50 119 浏览量 2018-11-27 09:44:37 上传评论收藏 37KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

droppicker.rar （5个子文件）

index.html 3KB

dist

images

drop-arrow.png 314B

jquery-1.11.3.min.js 94KB

droppicker.min.js 10KB

droppicker.min.css 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>droppicker4级联动组件</title> <style></style> <link type="text/css" rel="stylesheet" href="dist/droppicker.min.css"> </head> <body> <h1>参照、修改citypicker做四级联动，数据异步获取，动态赋值</h1> <h2>扩展需求可修改源码【可能有bug，欢迎评论】</h2> <h3> by XG.H </h3> <div style="position: relative;"> <input id="div" readonly type="text" style="width:420px;height:30px;float: left"> </div> <br> <br> <br> <button type="button" onclick="destroy()">销毁</button> <button type="button" onclick="reset()">重置</button> <button type="button" onclick="getcode()">获取code</button> <script src="dist/jquery-1.11.3.min.js"></script> <script src="dist/droppicker.min.js"></script> <script type="text/javascript"> $('#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'); } </script> </body> </html>

评论收藏

内容反馈