模仿select选择框

Css：

.CustomSearch{position:relative;background:#fff; width:170px;}
 .CustomSearch .title{ cursor:pointer; height:20px; line-height:20px;*line-height:22px;overflow:hidden; padding-left:5px; }
.CustomSearch .title em{ float:right; margin:7px 10px 0 0; display:block;width:10px; height:10px; background: url(../images/cssPos/custom_last_bg.jpg) no-repeat -65px -85px;}
.CustomSearch ol{ position:absolute; display:none;width:170px; background:#eee;}
.CustomSearch ol li{ float:none; margin:0; padding-left:5px; cursor:pointer; height:25px; line-height:25px; }
.CustomSearch ol li:hover{ background:#cfcbca; color:#fff;}

DOM：

<div class="CustomSearch">
    <div class="title">
          <em></em>
          <span>选择类别：</span>
          <span class="text">戒指&nbsp;&nbsp;吊坠</span>
          <input type="hidden" value="0" />
    </div>
    <ol class="clearfix">
        <li code="1">戒指</li>
        <li code="2">项链</li>
        <li code="3">手链</li>
        <li code="4">耳钉</li>
    </ol>
</div>

JS：

function CustomSearch(obj){
    this.CustomSearch=$(obj);//保存单个控件
    this.innerText=$(".text",this.CustomSearch);//保存准备改变文本的节点
    this.input=$("input",this.CustomSearch);//保存隐藏域
    this.select=$("ol",this.CustomSearch);//保存下拉框
    this.options=$("li",this.CustomSearch);//保存下拉选项
    this.t=null;
    var _this=this;
    this.CustomSearch.click(function(){
                                _this.select.show();     
                                     }).mouseout(function(){
                                         _this.t=window.setTimeout(function(){
                                                                            _this.select.hide();
                                                                            },100);
                                            
                                         }).mouseover(function(){
                                             window.clearTimeout(_this.t);
                                             });
    this.options.click(function(e){
                                e.stopPropagation();
                                var i=$(this).index();
                                _this.setValue(i);
                                _this.select.hide();
                                });
    };
CustomSearch.prototype={
    setValue:function(i){
        this.innerText.text(this.options.eq(i).text());
        this.input.val(this.options.eq(i).attr("code"));
        }
    
    };
CustomSearch.inite=function(CustomSearchs){
    var _this_=this;
    CustomSearchs.each(function(){
                                new _this_(this);
                                });
    };

调用：

CustomSearch.inite($(".CustomSearch"));

转载于:https://www.cnblogs.com/yangliulang/archive/2012/10/09/2716426.html