js特效

代码结构

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>