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

(一)下手之前先理清一下<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:;background:#fff;}

.select-list span{cursor:pointer;display:block;width:100%;height:22px;line-height:22px;padding:;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>下拉列表的更多相关文章

  1. jQuery还原select下拉列表和清空input的值,回显下拉列表框的值

    实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...

  2. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  3. 集装箱学习（两）：动手模拟AOP

    简单的说,Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架. 上文已经介绍模拟IoC实现,这篇文章来动手模拟AOP. AOP简述 面向对象强调"一切皆是对象&quo ...

  4. [原]容器学习（二）：动手模拟AOP

    简单来说,Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架.上文已经介绍模拟IoC实现,这篇文章来动手模拟AOP. AOP简述 面向对象强调"一切皆是对象" ...

  5. [原]容器学习（一）：动手模拟spring的IoC

    介绍 学习经典框架的实现原理以及设计模式在其实际中的运用,是非常有必要的,可以让我们更好进行面向对象. 本篇文章就来模拟Spring的IOC功能,明白原理后,可以更好的使用它,进而为进行面向对象提供一 ...

  6. 详细的<select>下拉列表详解

    我们使用表单下拉列表选择数据,如省.市.县.年.月等数据,我们即可使用下拉菜单表单进行设置.select 我下拉列表菜单标签Option为下拉列表数据标签Value 为Option的数据值(用于数据的 ...

  7. iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

    网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...

  8. 容器学习（一）：动手模拟spring的IoC

    介绍 学习经典框架的实现原理以及设计模式在事实上际中的运用,是很有必要的,能够让我们更好进行面向对象. 本篇文章就来模拟Spring的IOC功能.明确原理后,能够更好的使用它,进而为进行面向对象提供一 ...

  9. ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

随机推荐

  1. android: 服务的基本用法

    9.3   服务的基本用法 了解了 Android 多线程编程的技术之后,下面就让我们进入到本章的正题,开始对服务 的相关内容进行学习.作为 Android 四大组件之一,服务也少不了有很多非常重要的 ...

  2. VAG DMA protocol

    Func 0a - RAM Read 0A Func 0a - ROM Read 0A Func 0a - EEPROM Read FD Func 0C xx - EEPROM Write 0A Fu ...

  3. ACPI I/O resource conflict with SMBus

    ACPI I/O resource conflict with SMBus 以電子郵件傳送這篇文章BlogThis!分享至 Twitter分享至 Facebook分享到 Pinterest 這幾天遇到 ...

  4. 如何实现在H5里调起高德地图APP？（上）

    这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发 ...

  5. shell 控制输出格式 echo printf

    (1)echo [A@XY log]$ echo -e "ab\t45"   #带格式输出ab    45[A@XY log]$ echo "ab\t45"  ...

  6. 通过生产者消费者模式例子讲解Java基类方法wait、notify、notifyAll

    wait(),notify()和notifyAll()都是Java基类java.lang.Object的方法. 通俗解释wait():在当前线程等待其它线程唤醒.notify(): 唤醒一个线程正在等 ...

  7. 转connect() to unix:/var/run/php-fpm.sock failed (11: Resource temporarily unavailable)

    网站常出现502 bad gateway,程序没有问题. 根据nginx日志:connect() to unix:/var/run/php-fpm.sock failed (11: Resource ...

  8. 为什么你还在用嵌入式的方式来使用mod_wsgi?

    可能你还不知道你的python 网站是否跑在embedded mod of  mod_wsgi,不管你知不知道请看下去,因为大部分人都是在这个工作模式下运行的.嵌入式顾名思义就是运行在apache的子 ...

  9. OpenCV】透视变换 Perspective Transformation（续）

    载分 [OpenCV]透视变换 Perspective Transformation(续) 分类: [图像处理] [编程语言] 2014-05-27 09:39 2776人阅读 评论(13) 收藏 举 ...

  10. Scala 深入浅出实战经典 第53讲：Scala中结构类型实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...