自己动手模拟百分百<select>下拉列表

浏览器默认的下拉确实不好用啊，主要是样式不好修改和统一。

(一)下手之前先理清一下的流程:

　　1.结构：

　　　　　　show　　　　　　

　　2.事件：点击-选择-显示option的innerHTML-表单value改变-onchange被触发

(二)接着写出dom结构并设计一个样式:

　　1.dom结构如下：

<div id="selectYear">
    <div class="select-ipt">div>
    <div style="display: none " class="select-list">
      <span id="1">1992span>
    div>
    <input type="hidden" />
div> 

　　2.css样式，下拉框需要一个下三角图片居右，图片就不上传了，也可以自己用css模拟下三角。样式可以定义多种，样式名称改变不会影响js。

/*下拉框*/
.select-ipt {color:#888888;cursor: pointer;background: url(select.jpg) no-repeat center right;
border:1px #ccc solid;cursor:pointer;width:73px;height: 29px;margin:0px 0px 0px 0px;padding:3px 0px 0px 0px;
line-height:29px;font-size:14px;}
/*样式一：下拉一排一个*/
.select-list {border: 1px #ccc solid;width:73px;margin-left:0px;position:absolute;z-index:10000;background:#fff;}
.select-list span{cursor:pointer;display:block;width:100%;height:22px;line-height:22px;padding:0;font-size:14px;}
.select-list span:hover{background:#f6615b;color:#fff}

(三)开始写JS：

1.根据id绑定dom

function SelectPullDown(box){
    this.selectBox = document.getElementById(box);
    this.selectIpt = document.getElementById(box).getElementsByTagName("input")[0];//传值表单
    this.selectDivBtn = document.getElementById(box).getElementsByTagName("div")[0];//选中显示框
    this.selectDivList = document.getElementById(box).getElementsByTagName("div")[1];////下拉框
    this.selectSpan = document.getElementById(box).getElementsByTagName("span");//选项
}

//调用方法
var year = new SelectPullDown('selectYear');
year.init();

2.定义原型方法，开始模拟：

很简单，主要就是定义显示隐藏和点击事件，然后修改值，最后手动触发onchange事件，onchange事件必须有，方便以后的js验证。

SelectPullDown.prototype ={
    selectBox : ''，
    selectIpt : '',
    selectDivBtn : '',
    selectDivList : '',
    selectSpan : '',
    iptEven : function(){
        var self = this;
        this.selectBox.onmouseover = function(){
            self.selectListShow();
        }    
        this.selectBox.onmouseout = function(){
            self.selectListHide();
        }
        return this;    
    },
    selectListShow: function(){
        this.selectDivList.style.display = "block";
    },
    selectListHide: function(){
        this.selectDivList.style.display = "none";
    },
    selectPick : function() {
        var span = this.selectSpan,
        self = this;
        function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
        for(var i=0;i){
            span[i].onclick = function(){
                self.selectDivBtn.innerHTML = trimStr(this.innerHTML);
                self.selectIpt.value= trimStr(this.id);
                self.selectListHide();
                //chang事件触发
                if (self.selectIpt.fireEvent) self.selectIpt.fireEvent('onchange');
                else{ 
                    var evt;
                    evt = document.createEvent("HTMLEvents");  
                    evt.initEvent("change", true, true);  
                    self.selectIpt.dispatchEvent(evt);
                };
            }
        }    
        return this;
    },
    init : function(){
        this.iptEven().selectPick();    
    }
};

（四）完整代码如下（试着用下吧）：

    
请选择

    

      1992
      1993
      1994
      1995
      1996 
      1997