select下拉框插件（转）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,ul,li{ margin:0; padding:0; font-size:13px;}
        ul,li{list-style:none;}
        .div-select{position:relative; }
        .div-select cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
            padding-left:4px; padding-right:30px; border:1px solid #333333;
            background:url(xjt.png) no-repeat right center;}
        .div-select ul{width:184px;border:1px solid #333333; background-color:#fff; position:absolute; z-index:10; margin-top:-1px; display:none;}
        .div-select li{height:24px; line-height:24px;}
        .div-select li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
        .div-select li a:hover{background-color:#CCC;}
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        //改写div模拟下拉菜单jquery插件 基本结构微动， id改成类名，原主方法不懂只是改写下
        $.fn.divSelect = function(){
            return this.each(function(index){
                var $this = $(this),
                        $cite = $this.find("cite"),
                        $list = $this.find("ul"),
                        $input = $this.find(".div-input");

                $this.on("click","cite",function(){
                    $list.is(":hidden") ? $list.slideDown("fast") : $list.slideUp("fast");
                    return false
                });
                $list.on("click","a",function(){
                    var $this = $(this);
                    $cite.text($this.text());
                    $input.val($this.attr("selectid"));
                    $list.hide();
                    return false
                });
                $(document).on("click.select"+index,function(){
                    $list.hide();
                });
            })
        };

        $(function(){
//调用 支持jquery连缀语法
            $(".div-select").divSelect();
        });
    </script>
</head>

<body style="padding: 50px;">
<form action="" method="post">
    <div class="div-select">
        <cite>请选择特效分类1</cite>
        <ul>
            <li><a href="javascript:;" selectid="1">导航菜单1</a></li>
            <li><a href="javascript:;" selectid="2">焦点幻灯片1</a></li>
            <li><a href="javascript:;" selectid="3">广告代码1</a></li>
            <li><a href="javascript:;" selectid="4">网页特效1</a></li>
            <li><a href="javascript:;" selectid="5">jquery 特效1</a></li>
        </ul>
        <input name="" type="hidden" value="" class="div-input"/>
    </div>
    <br/><br/>
    <div class="div-select">
        <cite>请选择特效分类2</cite>
        <ul>
            <li><a href="javascript:;" selectid="1">导航菜单2</a></li>
            <li><a href="javascript:;" selectid="2">焦点幻灯片2</a></li>
            <li><a href="javascript:;" selectid="3">广告代码2</a></li>
            <li><a href="javascript:;" selectid="4">网页特效2</a></li>
            <li><a href="javascript:;" selectid="5">jquery 特效</a></li>
        </ul>
        <input name="" type="hidden" value="" class="div-input"/>
    </div>
</form>
</body>
</html>