自己动手模拟百分百<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 ...

随机推荐

LeakCanary 中文使用说明
http://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ LeakCanary 中文使用说明分享到:新浪微博微信 10 May 2015 Leak ...
Javascript基础恶补
1.字符集:Javascript采用Unicode字符集,支持地球上所有在用的语言. 2.区分大小写:Javascript区分大小写,HTML不区分大小写. 3.空格.换行.格式控制符:Javascr ...
MySQL实现定时任务
如果要每30秒执行以下语句 '; 可以给MySQL建个定时任务,具体如下: delimiter // /* 设定语句终结符为 //,因存储过程语句用;结束 */ 一.查看event是否开启 show ...
PHP多次调用Mysql存储过程报错解决办法
PHP多次调用Mysql数据库的存储过程会出现问题,主要问题为存储过程中执行多次SQL语句不能一一释放导致的,网上找了一些解决办法,比如使用 multi_query 然后一个一个释放,但是发现根本不适 ...
mysql-5.7.15-winx64免安装版配置
1.拷到硬盘根目录下; 2.在 bin 平行目录下新建 data 文件夹: 3. 修改 my-default.ini 文件,添加 basedir = C:\mysql-5.7.15-winx64d ...
dubbo发布web服务实例
dubbo角色与调用执行过程 dubbo节点角色说明:provider: 暴露服务的服务提供方consumer: 调用远程服务的服务消费方registry: 服务注册于发现的注册中心monitor: ...
redmine v3.02版的安装问题
redmine v3.0.2版的安装问题参考上次在朋友公司的云主机上安装的过程: 1. 下载 2. gem install bundler 3. bundle install 出现 rmagick ...
Filter之——GZIP全站压缩
GZIP压缩:将压缩后的文本文件,发送给浏览器,减少流量. 一.进行gzip压缩条件: 1.请求头:Accept-Encoding : gzip 告诉服务器,该浏览器支持gzip压缩. 2.响应头: ...
CLR VIA
标题状态内容什么是CLR? 什么是托管模块? 托管模块由什么组成? .net代码的执行过程 http://www.cnblogs.com/aaa6818162/p/4726581.ht ...
CodeBlocks16.01+wxWidgets3.0.2
[环境] windows7 x64,CodeBlocks16.01,wxWidgets3.0.2 [步骤] 一.下载所需的文件: 1.codeblocks官网:http://www.codeblock ...

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

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

随机推荐

热门专题