自己动手模拟百分百<select>下拉列表
2024-08-20 17:40:15
浏览器默认的下拉确实不好用啊，主要是样式不好修改和统一。
(一)下手之前先理清一下<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>
最新文章
- SRM 628 DIV2
- [机器学习] 虚拟机VMware中使用Ubuntu的联网问题
- scale配合过渡的时候bug
- JQuery_DOM 节点操作之包裹节点
- 【python】函数
- 汇总常用的jQuery操作Table tr td方法
- 【Unity3d】Ray射线初探-射线的原理及用法
- Git hub pull时候的错误 : The current branch is not configured for pull No value for key branch.master.merge found in configuration
- SQL Server 数据库基础编程
- CentOS 搭建LNMP服务器和LAMP服务器
- 使用NSURLSession实现下载的进度
- Java安全套接字扩展——JSSE
- 实现响应式——CSS变量
- 【平差软件学习---科傻】四、科傻二等水准平差（参数设置和in1文件讲解）
- 有时候不用explode截取字符串了，可以用用substr()
- HTML相对路径相对目录--上级目录及下级目录的写法
- 使用 IntraWeb (16) - 基本控件之 TIWList、TIWListbox、TIWComboBox、TIWOrderedListbox
- STS或eclipse安装SVN插件（转）
- 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: USERS
- 20145303刘俊谦《网络对抗》Exp2 后门原理与实践