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

随机推荐

JS深入了解闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作 ...
关于《精通移动App测试实战:技术、工具和案例》图书勘误信息
首先,对由于我们工作的疏忽向<精通移动App测试实战:技术.工具和案例>读者朋友们表示歉意,同时已将这些问题反馈给了出版社编辑同志,再版时将会统一修正: 其次,勘误信息请参看附件pdf文档 ...
分享45个设计师应该见到的新鲜的Web移动设备用户界面PSD套件
对于一个网页设计师来说做一个好的PSD模板是非常有挑战性的一项任务,虽然PSD的模板简化了设计任务,但找出高质量的PSD文件,可以自由使用,是一项艰巨的任务.你必须通过许多网页去找出一个极少数的PS ...
C#中扩展StringBuilder支持链式方法
本篇体验扩展StringBuilder使之支持链式方法. 这里有一个根据键值集合生成select元素的方法. private static string BuilderSelectBox(IDicti ...
使用eclipse JDT compile class，解决无法确定 X 的类型参数；对于上限为 X,java.lang.Object 的类型变量 X，不存在唯一最大实例
ant 命令行方式执行build javac编译class出现泛型无法转换无法确定 <X>X 的类型参数:对于上限为 X,java.lang.Object 的类型变量 X,不存在唯一最 ...
cocos2d-x.0创建工程
$ python create-multi-platform-projects.py -p PompaDroid -k cn.philon.pompadroid -l cpp
互联网的寒冬来了，BAT都不社招了
一总理上次来到创业街,是四个月,要不就是五个月前了. 之后,全国创业形势一路走红,锣鼓喧天鞭炮齐鸣.大众创业万众创新,颇有大炼钢铁亩产万斤之势,尤其在媒体上. 再之后,2015 进入下半年,风投圈的 ...
表单验证Jquery扩展方法类
/** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...
网页JS获取当前地理位置（省市区）
眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术,工作过程中遇到的问题也不是非常难并 ...
Python: 测试函数是否被调用
# helper class defined elsewhere class CallLogger(object): def __init__(self, meth): self.meth = met ...

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

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

随机推荐

热门专题