首页 > 代码库 > 自己动手模拟百分百<select>下拉列表

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

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

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

  1.结构:<select>

      <option value="">show</option>      

                 </select>

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

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

  1.dom结构如下:

<div id="selectYear">    <div class="select-ipt"></div><!--显示框,存放span的innerHTML,相当于option的innerHTML-->    <div style="display: none " class="select-list"><!--下拉框-->      <span id="1">1992</span><!--N个span-->    </div>    <input type="hidden" /><!--存放span的id,相当于option的value--></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.length;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();        }};

 

 

(四)完整代码如下(试着用下吧):

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉表单</title><style type="text/css">* {    margin:0px;    padding:0px;}body {    font-family: Arial, Helvetica, sans-serif;    font-size: 12px;}/*下拉框*/.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}</style></head><body><div id="selectYear">    <div class="select-ipt">请选择</div><!--显示框,存放span的innerHTML,相当于option的innerHTML-->    <div style="display: none " class="select-list"><!--下拉框-->      <span id="1">1992</span>      <span id="2">1993</span>      <span id="3">1994</span>      <span id="4">1995</span>      <span id="5">1996</span>       <span id="6">1997</span>     </div>    <input type="hidden" /><!--存放span的id,相当于option的value--></div>  <script type="text/javascript" >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");//选项}SelectPullDown.prototype ={    selectBox : ‘‘,//document.getElementById(‘selectYear‘).getElementsByTagName("input")[0],    selectIpt : ‘‘,//document.getElementById(‘selectYear‘).getElementsByTagName("input")[0],    selectDivBtn : ‘‘,//document.getElementById(‘selectYear‘).getElementsByTagName("div")[0],    selectDivList : ‘‘,//document.getElementById(box).getElementsByTagName("div")[1];    selectSpan : ‘‘,//document.getElementById(‘selectYear‘).getElementsByTagName("span"),    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.length;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();        }};//调用方法var year = new SelectPullDown(‘selectYear‘);year.init();</script></body></html>

 

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