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

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

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

　　1.结构：<select>

</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>下拉列表的更多相关文章

jQuery还原select下拉列表和清空input的值,回显下拉列表框的值
实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...
css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
集装箱学习（两）：动手模拟AOP
简单的说,Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架. 上文已经介绍模拟IoC实现,这篇文章来动手模拟AOP. AOP简述面向对象强调"一切皆是对象&quo ...
[原]容器学习（二）：动手模拟AOP
简单来说,Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架.上文已经介绍模拟IoC实现,这篇文章来动手模拟AOP. AOP简述面向对象强调"一切皆是对象" ...
[原]容器学习（一）：动手模拟spring的IoC
介绍学习经典框架的实现原理以及设计模式在其实际中的运用,是非常有必要的,可以让我们更好进行面向对象. 本篇文章就来模拟Spring的IOC功能,明白原理后,可以更好的使用它,进而为进行面向对象提供一 ...
详细的<select>下拉列表详解
我们使用表单下拉列表选择数据,如省.市.县.年.月等数据,我们即可使用下拉菜单表单进行设置.select 我下拉列表菜单标签Option为下拉列表数据标签Value 为Option的数据值(用于数据的 ...
iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...
容器学习（一）：动手模拟spring的IoC
介绍学习经典框架的实现原理以及设计模式在事实上际中的运用,是很有必要的,能够让我们更好进行面向对象. 本篇文章就来模拟Spring的IOC功能.明确原理后,能够更好的使用它,进而为进行面向对象提供一 ...
ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

随机推荐

django 注册、登录及第三方接口程序(4)：扩展邮箱注册，登录，微博登录
1.邮箱注册这里需要扩展User,两种解决办法,1,注册时将email字段内容赋给username,这种瞒天过海型的,另一种就是扩展user,这里介绍django1.5的扩展方法. 1.settin ...
搞了台2ussd服务器
只上了一颗CPU,内存还没有双通道
未能加载文件或程序集“System.Data.SQLite.DLL”或它的某一个依赖项
今天在部署code到测试环境的时候出现了未能加载文件或程序集"System.Data.SQLite.DLL"或它的某一个依赖项这个错误,其实错误的的原因有很多,1.典型的是是版 ...
线程互斥与析构函数中mutex的销毁
正在实现一个线程池的pthread包装器,突然发现有人在讨论关于http://blog.csdn.net/Solstice/article/details/5238671 是一篇比较老的文章,考虑了下 ...
初始zookeeper与集群搭建实例
zookeeper是什么 Zookeeper,一种分布式应用的协作服务,是Google的Chubby一个开源的实现,是Hadoop的分布式协调服务,它包含一个简单的原语集,应用于分布式应用的协作服务, ...
Python字符串的修改以及传参
前两天去面试web developer,面试官提出一个问题,用JavaScript或者Python实现字符串反转,我选择了Python,然后写出了代码(错误的): #!/usr/bin/env pyt ...
[纯干货] MySQL索引背后的数据结构及算法原理
摘要本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...
用ASP.NET Core 1.0中实现邮件发送功能
准备将一些项目迁移到 asp.net core 先从封装类库入手,在遇到邮件发送类时发现在 asp.net core 1.0中并示提供SMTP相关类库,于是网上一搜发现了MailKit 好东西一定要试 ...
每日英语：Success Outside the Dress Code
Anyone who has felt like the odd duck of the group can take heart from new research from Harvard Bus ...
ubuntu下取代ping的好工具tcpping
$ sudo apt-get install tcptraceroute bc$ cd /usr/bin$ sudo wget http://www.vdberg.org/~richard/tcppi ...

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

自己动手模拟百分百<select>下拉列表的更多相关文章

随机推荐

热门专题