jQuery基于citypicker四级联动菜单选择器代码.zip_htmlpicker四级联动资源-CSDN文库

共5个文件

js：2个

png：1个

html：1个

版权申诉

jquery代码

jquery特效

jquery插件

60 浏览量 2023-09-22 00:15:04 上传评论 1 收藏 39KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery基于citypicker四级联动菜单选择器代码.zip （5个子文件）

jquery-1.11.3.min.js 94KB

dist

droppicker.min.js 10KB

droppicker.min.css 2KB

images

drop-arrow.png 314B

index.html 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery基于citypicker四级联动菜单选择器代码</title> <link type="text/css" rel="stylesheet" href="dist/droppicker.min.css"> </head> <body><script src="/demos/googlegg.js"></script> <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="js/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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉