html方面

<div style="position: relative;">    
<input id="div" readonly type="text" style="width:420px;height:30px;float: left">    
</div>

css部分dist/droppicker.min.css

.drop-picker-input{opacity:0 !important;top:-9999px;left:-9999px;position:absolute}
.drop-picker-span{padding:0;position:relative;display:block;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid #ccc;background-color:#fff;color:#ccc;cursor:pointer;border-radius:3px}
.drop-picker-span>.placeholder{color:#aaa;padding:0 8px;font-size:12px}
.drop-picker-span>.arrow{position:absolute;top:50%;right:8px;width:10px;margin-top:-3px;height:5px;background:url(images/drop-arrow.png) -10px -25px no-repeat}
.drop-picker-span.focus,.drop-picker-span.open{border-color:#46a4ff}.drop-picker-span.open>.arrow{background-position:-10px -10px}
.drop-picker-span>.title>span{color:#333;padding:2px 5px;border-radius:3px}
.drop-picker-span>.title>span:hover{background-color:#f1f8ff}
.drop-picker-dropdown{position:absolute;width:315px;left:-9999px;top:-9999px;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:999999;display:none;min-width:330px;margin-bottom:20px}
.drop-select-wrap{box-shadow:0 1px 5px rgba(0,0,0,0.5)}.drop-select-tab{border-bottom:1px solid #ccc;background:#f8f8f8;font-size:13px;}
.drop-select-tab>a{display:inline-block;padding:8px 22px;border-left:1px solid #ccc;border-bottom:1px solid transparent;color:#4d4d4d;text-align:center;outline:0;text-decoration:none;cursor:pointer;font-size:14px;margin-bottom:-1px}
.drop-select-tab>a.active{background:#fff;border-bottom:1px solid #fff;color:#46a4ff}
.drop-select-tab>a:first-child{border-left:0}
.drop-select-tab>a:last-child.active{border-right:1px solid #ccc}
.drop-select-content{width:100%;min-height:10px;background-color:#fff;padding:10px 15px;box-sizing:border-box}
.drop-select{font-size:13px}.drop-select dl{line-height:2;clear:both;padding:3px 0;margin:0}
.drop-select dt{position:absolute;width:2.5em;font-weight:500;text-align:right;line-height:2}
.drop-select dd{margin-left:0;line-height:2}
.drop-select.droplevel1 dd{margin-left:3em}
.drop-select a{display:inline-block;padding:0 10px;outline:0;text-decoration:none;white-space:nowrap;margin-right:2px;text-decoration:none;color:#333;cursor:pointer}
.drop-select a:hover,.drop-select a:focus{background-color:#f1f8ff;border-radius:2px;color:#46a4ff}
.drop-select a.active{background-color:#46a4ff;color:#fff;border-radius:2px}

图片

html按钮

<button type="button" onClick="destroy()">销毁</button>    
<button type="button" onClick="reset()">重置</button>    
<button type="button" onClick="getcode()">获取code</button>

js部分

<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>

js加载部分dist/droppicker.min.js

(function(a){a(jQuery)})(function(h){var d="droppicker";var g="change."+d;var f="droplevel1";var e="droplevel2";var c="droplevel3";var a="droplevel4";function b(j,i){this.$element=h(j);this.$dropdown=null;this.options=h.extend({},b.DEFAULTS,h.isPlainObject(i)&&i);this.active=false;this.dems=[];this.needBlur=false;this.init()}b.prototype={constructor:b,init:function(){this.defineDems();this.render();this.bind();this.active=true},render:function(){var k=this.getPosition(),l=this.$element.attr("placeholder")||this.options.placeholder,i='<span class="drop-picker-span" style="'+this.getWidthStyle(k.width)+"height:"+k.height+"px;line-height:"+(k.height-1)+'px;">'+(l?'<span class="placeholder">'+l+"</span>":"")+'<span class="title"></span><div class="arrow"></div></span>',m='<div class="drop-picker-dropdown" style="left:0px;top:100%;'+this.getWidthStyle(k.width,true)+'"><div class="drop-select-wrap"><div class="drop-select-tab"><a class="active" data-count="droplevel1">位置</a>'+(this.includeDem("droplevel2")?'<a data-count="droplevel2">文件柜</a>':"")+(this.includeDem("droplevel3")?'<a data-count="droplevel3">文件箱</a>':"")+(this.includeDem("droplevel4")?'<a data-count="droplevel4">文件格</a>':"")+'</div><div class="drop-select-content"><div class="drop-select droplevel1" data-count="droplevel1"></div>'+(this.includeDem("droplevel2")?'<div class="drop-select droplevel2" data-count="droplevel2"></div>':"")+(this.includeDem("droplevel3")?'<div class="drop-select droplevel3" data-count="droplevel3"></div>':"")+(this.includeDem("droplevel4")?'<div class="drop-select droplevel4" data-count="droplevel4"></div>':"")+"</div></div>";this.$element.addClass("drop-picker-input");this.$textspan=h(i).insertAfter(this.$element);this.$dropdown=h(m).insertAfter(this.$textspan);var j=this.$dropdown.find(".drop-select");h.each(this.dems,h.proxy(function(n,o){this["$"+o]=j.filter("."+o+"")},this));this.refresh()},refresh:function(j){var i=this.$dropdown.find(".drop-select");i.data("item",null);var k=this;h.each(this.dems,h.proxy(function(n,o){if(!h.isEmptyObject(this.options[o]&&this.options[o].code)){var m=this["$"+o];var l={code:this.options[o].code,name:this.options[o].name};m.data("item",l)}if(j){this.options[o]={}}},this));k.tab(f)},defineDems:function(){var i=false;h.each([f,e,c,a],h.proxy(function(j,k){if(!i){this.dems.push(k)}if(k===this.options.level){i=true}},this))},includeDem:function(i){return h.inArray(i,this.dems)!==-1},getPosition:function(){var m,l,i,k,j;m=this.$element.position();k=this.getSize(this.$element);l=k.height;i=k.width;if(this.options.responsive){j=this.$element.offsetParent().width();if(j){i=i/j;if(i>0.99){i=1}i=i*100+"%"}}return{top:m.top||0,left:m.left||0,height:l,width:i}},getSize:function(i){var j,l,k;if(!i.is(":visible")){j=h("<div />").appendTo(h("body"));j.css({position:"absolute !important",visibility:"hidden !important",display:"block !important"});l=i.clone().appendTo(j);k={width:l.outerWidth(),height:l.outerHeight()};j.remove()}else{k={width:i.outerWidth(),height:i.outerHeight()}}return k},getWidthStyle:function(i,j){if(this.options.responsive&&!h.isNumeric(i)){return"width:"+i+";"}else{return"width:"+(j?Math.max(350,i):i)+"px;"}},bind:function(){var i=this;h(document).on("click",this._mouteclick=function(m){var j=h(m.target);var l,k,n;if(j.is(".drop-picker-span")){k=j}else{if(j.is(".drop-picker-span *")){k=j.parents(".drop-picker-span")}}if(j.is(".drop-picker-input")){n=j}if(j.is(".drop-picker-dropdown")){l=j}else{if(j.is(".drop-picker-dropdown *")){l=j.parents(".drop-picker-dropdown")}}if(!n&&!k&&!l||k&&k.get(0)!==i.$textspan.get(0)||n&&n.get(0)!==i.$element.get(0)||l&&l.get(0)!==i.$dropdown.get(0)){i.close(true)}});this.$element.on("change",this._changeElement=h.proxy(function(){this.close(true);this.refresh(true)},this)).on("focus",this._focusElement=h.proxy(function(){this.needBlur=true;this.open()},this)).on("blur",this._blurElement=h.proxy(function(){if(this.needBlur){this.needBlur=false;this.close(true)}},this));this.$textspan.on("click",function(l){var j=h(l.target),k;i.needBlur=false;if(j.is(".select-item")){k=j.data("count");i.open(k)}else{if(i.$dropdown.is(":visible")){i.close()}else{i.open()}}}).on("mousedown",function(){i.needBlur=false});this.$dropdown.on("click",".drop-select a",function(){var k=h(this).parents(".drop-select");var j=k.find("a.active");var l=k.next().length===0;j.removeClass("active");h(this).addClass("active");if(j.data("code")!==h(this).data("code")){k.data("item",{name:h(this).attr("title"),code:h(this).data("code")});i.clearDataItem(k.data("count"));h(this).trigger(g);i.feedText();i.feedVal(true);if(l){i.close()}if(typeof i.options.callback==="function"){i.options.callback(k.data("item"))}}}).on("click",".drop-select-tab a",function(){if(!h(this).hasClass("active")){var j=h(this).data("count");i.tab(j,false)}}).on("mousedown",function(){i.needBlur=false});if(this.$droplevel1){this.$droplevel1.on(g,this._changeProvince=h.proxy(function(){i.tab(e,true)},this))}if(this.$droplevel2){this.$droplevel2.on(g,this._changeCity=h.proxy(function(){i.tab(c,true)},this))}if(this.$droplevel3){this.$droplevel3.on(g,this._changeDistrict=h.proxy(function(){i.tab(a,true)},this))}},open:function(i){i=i||f;this.$dropdown.show();this.$textspan.addClass("open").addClass("focus");this.tab(i)},close:function(i){this.$dropdown.hide();this.$textspan.removeClass("open");if(i){this.$textspan.removeClass("focus")}},unbind:function(){h(document).off("click",this._mouteclick);this.$element.off("change",this._changeElement);this.$element.off("focus",this._focusElement);this.$element.off("blur",this._blurElement);this.$textspan.off("click");this.$textspan.off("mousedown");this.$dropdown.off("click");this.$dropdown.off("mousedown");if(this.$droplevel1){this.$droplevel1.off(g,this._changeProvince)}if(this.$droplevel2){this.$droplevel2.off(g,this._changeCity)}if(this.$droplevel3){this.$droplevel3.off(g,this._changeDistrict)}},getText:function(){var i="";this.$dropdown.find(".drop-select").each(function(){var k=h(this).data("item"),j=h(this).data("count");if(k){i+=(h(this).hasClass("droplevel1")?"":"/")+'<span class="select-item" data-count="'+j+'" data-code="'+k.code+'">'+k.name+"</span>"}});return i},getPlaceHolder:function(){return this.$element.attr("placeholder")||this.options.placeholder},feedText:function(){var i=this.getText();if(i){this.$textspan.find(">.placeholder").hide();this.$textspan.find(">.title").html(i).show()}else{this.$textspan.find(">.placeholder").text(this.getPlaceHolder()).show();this.$textspan.find(">.title").html("").hide()}},getCode:function(j){var k={},i=[];this.$textspan.find(".select-item").each(function(){var m=h(this).data("code");var l=h(this).data("count");k[l]=m;i.push(m)});return j?k[j]:i.join("/")},getVal:function(){var j="";var i="";this.$dropdown.find(".drop-select").each(function(){var k=h(this).data("item");if(k){j+=(h(this).hasClass("droplevel1")?"":"/")+k.name;i+=(h(this).hasClass("droplevel1")?"":"_")+k.code}});h("#addrValue").val(i);return j},feedVal:function(i){this.$element.val(this.getVal());if(i){this.$element.trigger("cp:updated")}},output:function(k,o){var j=this.options;var i=this["$"+k];var m;var l;var n;if(!i||!i.length){return}m=i.data("item");n=(m?m.code&&m.code.toString():null)||(typeof j[k]==="object"&&j[k].code?j[k].code.toString():"");l=k===f?j[k].code||0:k===e?this.$droplevel1&&this.$droplevel1.find(".active").data("code")||j[f].code||-1:k===c?this.$droplevel2&&this.$droplevel2.find(".active").data("code")||j[e].code||-1:k===a?this.$droplevel3&&this.$droplevel3.find(".active").data("code")||j[c].code||-1:l;if(l>=0){this.getList(k,l,function(p){var r=[],q=[];p.forEach(function(s){r.push({code:s.code,name:s.name,selected:s.code===n})});q.push('<dl class="clearfix"><dd>');h.each(r,function(s,t){q.push('<a title="'+(t.name||"")+'" data-code="'+(t.code||"")+'" class="'+(t.selected?" active":"")+'">'+t.name+"</a>")});q.push("</dd></dl>");i.html(q);if(typeof o==="function"){if(r.length==0){o(true)}else{o(false)}}})}},clearDataItem:function(i){var k=[f,e,c,a];var l=k.indexOf(i);var j=this;k.forEach(function(o,n){if(n>l){j.options[o]={};var m=j["$"+o];m.html("");m.data("item",null)}})},getList:function(j,k,l){var i=this.options;if(typeof i.data==="function"&&typeof l==="function"){i.data(j,k,function(m){if(h.isArray(m)){l(m)}else{l([]);console.error("need a array")}})}else{l([])}},tab:function(l,n){var o=this;var k=this.$dropdown.find(".drop-select");var i=this.$dropdown.find(".drop-select-tab > a");var j=this["$"+l];var m=this.$dropdown.find('.drop-select-tab > a[data-count="'+l+'"]');if(j){k.hide();j.show();i.removeClass("active");m.addClass("active");if(l===f){this.output(f,function(){o.feedText();o.feedVal()})}if(l===e){this.output(e,function(p){if(p&&n){o.close();return}})}if(l===c){this.output(c,function(p){if(p&&n){o.close();return}})}if(l===a){this.output(a,function(p){if(p&&n){o.close();return}})}}},reset:function(){this.$element.val(null).trigger("change")},destroy:function(){this.unbind();this.$element.removeData(d).removeClass("drop-picker-input");this.$textspan.remove();this.$dropdown.remove()}};b.DEFAULTS={data:[],responsive:false,placeholder:"请选择文件位置",level:"droplevel4",droplevel1:{},droplevel2:{},droplevel3:{},droplevel4:{},callback:null};b.setDefaults=function(i){h.extend(b.DEFAULTS,i)};b.other=h.fn.droppicker;h.fn.droppicker=function(j){var i=[].slice.call(arguments,1);return this.each(function(){var n=h(this);var m=n.data(d);var k;var l;if(!m){if(/destroy/.test(j)){return}k=h.extend({},n.data(),h.isPlainObject(j)&&j);n.data(d,m=new b(this,k))}if(typeof j==="string"&&h.isFunction(l=m[j])){l.apply(m,i)}})};h.fn.droppicker.Constructor=b;h.fn.droppicker.setDefaults=b.setDefaults;h.fn.droppicker.noConflict=function(){h.fn.droppicker=b.other;return this}});