基于citypicker实现四级联动菜单代码



65 258 87



特效描述:基于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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滚动切换 滑动选项卡切换 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 切换按钮 form表单 导航菜单导航条 导航切换 二级导航菜单 提示框/弹出层 三级联动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到