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

(一)下手之前先理清一下<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 WebView Memory Leak WebView内存泄漏

    在这次开发过程中,需要用到webview展示一些界面,但是加载的页面如果有很多图片就会发现内存占用暴涨,并且在退出该界面后,即使在包含该webview的Activity的destroy()方法中,使用 ...

  2. jquery判断checkbox是否选中及改变checkbox状态（转）

    jquery判断checked的三种方法:.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('c ...

  3. [Aaronyang] 写给自己的WPF4.5 笔记24 [与winform交互-flash-DEMO-收尾篇1/6]

      =====潇洒的版权线======www.ayjs.net===== Aaronyang ===== AY ====== 安徽 六安 杨洋 ======   未经允许不许转载 ====== 1.新 ...

  4. JAVA自动化测试数据设计

    数据管理是很重要的,数据管理与方法一样,依然是有层次的,我们在测试的过程中,可能会有多个环境,每个环境的URL啊,登录名啊,数据库连接地址啊等等不一样,我们可以把这些环境每个都配置一个数据文件,里面写 ...

  5. Fiddler高级技巧 - 映射路径到本地文件夹

    适用场景: 你是前端开发人员,要开发一个小模块,需要用到线上的环境(账号.数据.跨域等),但你又没有权限往线上传文件 你是移动测试人员,需要将一组接口的返回结果替换为另一组,最简单的办法就是使用Fid ...

  6. Mac Port 基本用法总结

    Mac Port 基本用法总结 Mac Port 基本用法总结 1. Mac Port的下载地址 http://www.macports.org/install.php 2. Mac Port的说明文 ...

  7. Oracle限制某个用户的连接数及PROFILE介绍

    限制一个用户的链接数,可以通过ORACLE的PROFILE文件来实现 1.     查看resource_limit参数: SQL> show parameter resource_limit ...

  8. 【转】iOS设备的UDID是什么？苹果为什么拒绝获取iOS设备UDID的应用？如何替代UDID？

    本文讲诉的主要是为什么苹果2011年8月发布iOS 5后就开始拒绝App获取设备的UDID以及UDID替补方案,特别提醒开发者苹果App Store禁止访问UDID的应用上架(相关推荐:APP被苹果A ...

  9. 手机软件mockup设计工具

    软件界面设计工具 UIDesigner v2.5 详见 http://www.downyi.com/downinfo/26770.html

  10. Android TabActivity中onKeyDown无效问题

    @Override     public boolean onKeyDown(int keyCode, KeyEvent event)     {                  //按下键盘上返回 ...