基于jQuery的三级联动控件

三级联动控件在日常开发中经常会用到，比如选择省市区，年月日等情况，而原生的html并没有这样的一个控件，闲暇之余，写了这么一个控件，预览效果如下：

废话不多说，直接贴代码：
jquery.dropmenu.css

.dropmenu {
    width: auto;
    height: auto;
}
.dropmenu > .top {
    position: relative;
    width: 100%;
    height: 30px;
    border: 1px #cccccc solid;
    font-size: 0;
    overflow:hidden;
}
.dropmenu > .top >.data {
    float: left;
    padding: 0 5px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    border-right: 1px #cccccc solid;
    background: #dddddd;
}
.dropmenu > .top > .data > p {
    padding: 0 30px 0 0;
    margin: 0;
    white-space:nowrap;
    word-break:break-all;
    text-overflow:ellipsis;
    overflow:hidden;
}
.dropmenu > .top > .btn {
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    background: #ffffff;
}
.dropmenu > .drop {
    position: absolute;
    margin-top: -1px;
    height: auto;
    width: auto;
    z-index: 999;
    background: #fff;
    font-size: 0;
}
.dropmenu > .drop > .options {
    display: inline-block;
    vertical-align: top;
    height: auto;
    width: auto;
    border-left: 1px #cccccc solid;
    border-right: 1px #cccccc solid;
    border-top: 1px #cccccc solid;
}
.dropmenu > .drop > .options > ul {
    margin: 0;
    padding:0;
    list-style-type: none;
}
.dropmenu > .drop > .options > ul > li {
    padding:0 5px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px #cccccc solid;
    cursor: pointer;
    font-size: 14px;
}
.dropmenu > .drop > .options > ul > li:hover {
    background: #cccccc
}

jquery.dropmenu.js

if (jQuery === undefined)
    throw new Error("本控件基于jQuery，请先引入jQuery相关文件！")
$.fn.dropmenu = function(config) {
    return DropMenu.call(this,config)
}
var DropMenu = function(config) {
    this.top = null//顶部部分
    this.drop = null//下拉部分
    this.width = null//top的宽度
    this.optionsWidth = null//options区域宽度
    this.last = false//是否允许选择非末级
    this.cache = {}//缓存解析的数据
    this.options = [] //下拉数据
    this.data = {}//被选中的数据
    this.interface = null//如果需要从网络请求数据
    this.listener = {}//事件监听
    $.extend(this,DropMenu.prototype,config)
    this.init()
    this.bind()
    this.adjust()
    return this
}
/**
 * 初始化控件视图
 */
DropMenu.prototype.init = function() {
    this.top = $("<div class='top'>")
    this.top.append("<div class='data'><p></p></div>")
    this.top.append("<div class='btn'>▼</div>")
    this.drop = $("<div class='drop'>")
    this.drop.hide()
    if (this.width !== null)
        this.top.css("width",this.width)
    this.append(this.top)
    this.append(this.drop)
}
/**
 * 绑定事件
 */
DropMenu.prototype.bind = function () {
    this.top.on("click.api.dropmenu.display",".btn",this,DropMenu.prototype.display)
    this.drop.on("click.api.dropmenu.click",".options > ul > li",this,DropMenu.prototype.click)
    this.drop.on("mouseleave.api.dropmenu.leave",".options",this,DropMenu.prototype.leave)
    this.drop.on("mouseover.api.dropmenu.slide",".options > ul > li",this,DropMenu.prototype.slide)
}
/**
 * 调整和绑定数据
 * @param level 需要加载的数据的级别（1，2，3），默认为1
 * @param offsetTop 偏移
 * @param parent 父级关键字
 */
DropMenu.prototype.adjust = function(level,offsetTop,parent) {
    if (level === undefined || isNaN(level))
        level = "1"
    var data = this.parse(level,parent)
    if (data === undefined || data.length === 0)
        return;
    var options = $("<div class='options' data-level='"+level+"'>")
    var ul = $("<ul>")
    for (var i=0 ; i < data.length ; i++) {
        ul.append("<li data-key='"+data[i].key+"'>"+data[i].value+"</li>")
    }
    options.append(ul)
    if (offsetTop !== undefined && !isNaN(offsetTop))
        options.css("margin-top",offsetTop+"px")
    if (this.optionsWidth !== null)
        options.css("width",this.optionsWidth)
    this.drop.append(options)
}
/**
 * 解析options,并将解析过的直接存入缓存，方便直接使用
 */
DropMenu.prototype.parse = function(level,parent){
    if (this.options === undefined || this.options.length === 0)
        return
    if (level === undefined)
        level = "1"
    if (parent !== undefined && this.cache[parent] !== undefined)
        return this.cache[parent]
    var result = new Array
    for (var i=0;i<this.options.length;i++) {
        if (level === this.options[i].level && parent === this.options[i].parent) {
            result.push(this.options[i])
        }
    }
    if (parent === undefined)
        this.cache["top"] = result
    else
        this.cache[parent] = result
    return result
}
/**
 * btn点击事件
 * @param event
 */
DropMenu.prototype.display = function(event) {
    var plugin = event.data
    plugin.drop.fadeToggle()
}
/**
 * 下拉列表中选项的鼠标移动事件
 * @param event
 */
DropMenu.prototype.slide = function(event) {
    var plugin = event.data
    var level = $(this.closest(".options")).attr("data-level")
    var nextLevel = "1"
    if (level === "1") {
        plugin.drop.find(".options:gt(0)").remove()
        nextLevel = "2"
    }else if (level === "2") {
        plugin.drop.find(".options:gt(1)").remove()
        nextLevel = "3"
    }else if (level === "3") {
        return
    }
    var offsetTop = this.offsetTop - 1
    var parent = $(this).attr("data-key")
    plugin.adjust(nextLevel,offsetTop,parent)
}
/**
 * item点击事件
 * @param event
 */
DropMenu.prototype.click = function (event) {
    var plugin = event.data
    var level = $(this).closest(".options").attr("data-level")
    var parent = $(this).attr("data-key")
    var key = $(this).attr("data-key")
    var value = $(this).text()
    var p = plugin.top.find(".data > p")
    var children = null
    if (!plugin.last && level === "1" ) {
        children = plugin.parse("2",parent)
    }else if (!plugin.last && level === "2") {
        children = plugin.parse("3",parent)
    }
    if (children === null || children.length === 0) {
        p.text(value)
        p.attr("key",key)
        plugin.drop.hide()
        plugin.data["key"]=key
        plugin.data["value"]=value
        if (plugin.listener.select !== undefined)
            plugin.listener.select(plugin.data,this,plugin)
    }
}
/**
 * 鼠标离开options区域事件
 * @param event
 */
DropMenu.prototype.leave = function (event) {
    var plugin = event.data
    var to = event.toElement
    if (to.closest(".options") == null) {
        plugin.drop.hide()
        plugin.drop.find(".options:gt(0)").remove()
    }
}
DropMenu.prototype.request = function() {

}
DropMenu.prototype.getData = function () {
    return this.data
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="UTF-8">
    <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
    <link rel="stylesheet" type="text/css" href="jquery.dropmenu.css">
    <script type="text/javascript" src="jquery.dropmenu.js"></script>
</head>
<body>
    <div class="dropmenu"></div>
    <script type="text/javascript">
        $(function(){
            var obj=$(".dropmenu").dropmenu({
                "width":"210px",
                "optionsWidth" : "210px",
                "options":[
                    {"key":"1","value":"湖南省","level":"1"},
                    {"key":"2","value":"湖北省","level":"1"},
                    {"key":"3","value":"河北省","level":"1"},
                    {"key":"4","value":"河南省","level":"1"},
                    {"key":"5","value":"广东省","level":"1"},
                    {"key":"6","value":"广西省","level":"1"},
                    {"key":"7","value":"福建省","level":"1"},
                    {"key":"8","value":"安徽省","level":"1"},
                    {"key":"21","value":"长沙市","level":"2","parent":"1"},
                    {"key":"22","value":"株洲市","level":"2","parent":"1"},
                    {"key":"23","value":"衡阳市","level":"2","parent":"1"},
                    {"key":"24","value":"邵阳市","level":"2","parent":"1"},
                    {"key":"21","value":"武汉市","level":"2","parent":"2"},
                    {"key":"22","value":"黄石市","level":"2","parent":"2"},
                    {"key":"23","value":"十堰市","level":"2","parent":"2"},
                    {"key":"24","value":"宜昌市","level":"2","parent":"2"},
                    {"key":"25","value":"襄阳市","level":"2","parent":"2"},
                    {"key":"26","value":"鄂州市","level":"2","parent":"2"},
                    {"key":"27","value":"荆门市","level":"2","parent":"2"},
                    {"key":"28","value":"孝感市","level":"2","parent":"2"},
                    {"key":"21","value":"石家庄市","level":"2","parent":"3"},
                    {"key":"22","value":"唐山市","level":"2","parent":"3"},
                    {"key":"23","value":"秦皇岛市","level":"2","parent":"3"},
                    {"key":"24","value":"邯郸市","level":"2","parent":"3"},
                    {"key":"21","value":"邢台市","level":"2","parent":"3"},
                    {"key":"41","value":"开封市","level":"2","parent":"4"},
                    {"key":"42","value":"洛阳市","level":"2","parent":"4"},
                    {"key":"43","value":"安阳市","level":"2","parent":"4"},
                    {"key":"231","value":"茅箭区","level":"3","parent":"23"},
                    {"key":"232","value":"张湾区","level":"3","parent":"23"},
                    {"key":"233","value":"十堰经济技术开发区","level":"3","parent":"23"},
                    {"key":"234","value":"郧阳区","level":"3","parent":"23"},
                    {"key":"235","value":"郧西县","level":"3","parent":"23"},
                    {"key":"236","value":"竹山县","level":"3","parent":"23"},
                    {"key":"237","value":"竹溪县","level":"3","parent":"23"},
                    {"key":"238","value":"房县","level":"3","parent":"23"}
                ]
            });
        })
    </script>
</body>
</html>

本控件仅供学习使用，可能存在一定的BUG，欢迎大家指正。