首页 > 代码库 > 自己动手模拟百分百<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>下拉列表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。