特效描述:基于citypicker实现 四级联动 菜单代码,基于citypicker实现四级联动菜单代码
代码结构
1. 引入CSS
<link type="text/css" rel="stylesheet" href="dist/droppicker.min.css">
2. 引入JS
<script src="js/jquery-1.11.3.min.js"></script> <script src="dist/droppicker.min.js"></script>
3. HTML代码
<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 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';"> </div>