jQuery扩展模拟下拉列表框

HTML部分：

<div class="dropdown" name="mbrName" style="z-index: 1000; margin: 50px;">
        <input class="dropdown-value" type="text" placeholder="input模拟下拉框">
        <ul class="dropdown-menu menu-sponsors" role="menu" aria-labelledby="dLabel">
            <li><a>这是第一个</a></li>
            <li><a>这是第二个</a></li>
            <li><a>这是第三个</a></li>
            <li><a>这是第四个</a></li>
            <li><a>这是第五个</a></li>
        </ul>
    </div>
    <br><hr><br>
    <div class="dropdown" style="z-index: 999; margin: 50px;">
        <a><span class="dropdown-value">a标签模拟下拉框x</span></a>
        <ul class="dropdown-menu menu-sponsors" role="menu" aria-labelledby="dLabel">
            <li><a>a标签模拟下拉框1</a></li>
            <li><a>a标签模拟下拉框2</a></li>
            <li><a>a标签模拟下拉框3</a></li>
            <li><a>a标签模拟下拉框4</a></li>
            <li><a>a标签模拟下拉框5</a></li>
        </ul>
    </div>

CSS部分：

*{margin: 0;padding: 0;}
        .dropdown{
            display: inline-block;
            position: relative;
            background-color: #FFF;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="text"]{
            display: inline-block;
            width: 150px;
            height: 20px;
            line-height: 20px;
            padding: 6px 20px 6px 10px;
            border: 1px solid #CCC;
            background-color: #FFF;
            color: #333;
            border-radius: 4px;
            vertical-align: middle;
        }
        .dropdown .dropdown-menu{
            float: left;min-width: 90px;
            position: absolute;
            left: -1px;
            display: none;
            width: 100%;
            padding: 0;
            z-index: 1000;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            overflow-y: auto;
            background-color: #FFF;
            border: 1px solid #CCC;
            border-radius: 4px;
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
            background-clip: padding-box;
            cursor: pointer;
        }
        .dropdown-menu>li>a{
            display: block;
            padding: 3px 20px;
            font-weight: 400;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .dropdown a{
            display: inline-block;
            padding: 6px 20px 6px 10px;
            width: 100%;
            color: #4A4A4A;
            overflow: hidden;
            vertical-align: middle;
            text-decoration: none;
            box-sizing: border-box;
        }
        .dropdown-menu>li>a:hover{
            background: #CCC;
        }
        .show{
            display: block !important;
        }

JS部分：

<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
    (function($){
        $.fn.dropdown = function(options){
            var opts = jQuery.extend({
                listers:{
                    'select':function($menu,$selected){}
                }
            },options||{});
            this.getSelected = function(){
                return this[0].selected;
            }
            return this.each(function(){
                var item = $(this);
                item.bind('click',function(e){
                    var $menu = $(this).children('.dropdown-menu');
                    $('.dropdown-menu').removeClass('show');
                    $menu.addClass('show');
                    $menu.delegate('li','click',function(e){
                        item[0].selected = {name:this.innerText,value:this.getAttribute('index')};
                        var dropDownValue = item.find('.dropdown-value');
                        if(dropDownValue[0].tagName == 'INPUT'){
                            dropDownValue.val($(this).text());
                        }else{
                            dropDownValue.text($(this).text());
                        }
                        dropDownValue.css('color','');
                        $menu.removeClass('show');
                        $(this).undelegate('click');
                        opts.listers.select.apply(item,[$menu,$(this)]);  //触发组件的选择事件
                        e.stopPropagation();
                    });
                    $('body').bind('click',function(){
                        $('.dropdown-menu').removeClass('show');
                        $('body').unbind('click');
                    });
                    e.stopPropagation();
                })
            })
        }
        $('.dropdown').dropdown();
    })(jQuery);
</script>