自己写的一个用js把select换成div与span与ul的东西
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<style type="text/css" media="screen">
.none {
display: none;
}
.seled {
background: red;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
div.selectDiv {
position: relative;
display: inline-block;
border: 1px solid #ccc;
width: 78px;
font-size: 12px;
/*line-height: 22px;*/
}
div#sel-div-sex {
width: 200px;
}
div.selectDiv span {
display: block;
width: 100%;
background: #fff url(data:image/gif;base64,R0lGODlhEQA7AMQAAPL2+c/h7bvQ3uTs8sXe5vb4+vr8/Yinu+Tr79rk6sPX5cTW43aasKS8y8jW3+3x9JKuwMnc6bbN3G2Tq////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAEQA7AAAFeiAljmRpnqgYSGzLBijhskRqKK5ipBQgsAIATwRgCYeiwQDJbDqf0KhUNKtar9eJdsvter/eqXhMLjNXVtgp4o3wFtzF0KcNIh+sR1Np7vv/U2CCg4SFhl2AiYqLJQ4OTQlaCUgIDFoMCDwFB1wHBSkQXhAoDWANjGIhADs=) scroll no-repeat right 4px;
cursor: default;
white-space: nowrap;
word-break: keep-all;
height: 16px;
line-height: 16px;
}
div.selectDiv span:hover {
background: #fff url(data:image/gif;base64,R0lGODlhEQA7AMQAAPL2+c/h7bvQ3uTs8sXe5vb4+vr8/Yinu+Tr79rk6sPX5cTW43aasKS8y8jW3+3x9JKuwMnc6bbN3G2Tq////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAEQA7AAAFeiAljmRpnqgYSGzLBijhskRqKK5ipBQgsAIATwRgCYeiwQDJbDqf0KhUNKtar9eJdsvter/eqXhMLjNXVtgp4o3wFtzF0KcNIh+sR1Np7vv/U2CCg4SFhl2AiYqLJQ4OTQlaCUgIDFoMCDwFB1wHBSkQXhAoDWANjGIhADs=) scroll no-repeat right -20px;
}
div.selectDiv span.open {
background: #fff url(data:image/gif;base64,R0lGODlhEQA7AMQAAPL2+c/h7bvQ3uTs8sXe5vb4+vr8/Yinu+Tr79rk6sPX5cTW43aasKS8y8jW3+3x9JKuwMnc6bbN3G2Tq////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAEQA7AAAFeiAljmRpnqgYSGzLBijhskRqKK5ipBQgsAIATwRgCYeiwQDJbDqf0KhUNKtar9eJdsvter/eqXhMLjNXVtgp4o3wFtzF0KcNIh+sR1Np7vv/U2CCg4SFhl2AiYqLJQ4OTQlaCUgIDFoMCDwFB1wHBSkQXhAoDWANjGIhADs=) scroll no-repeat right -46px;
}
div.selectDiv ul {
position: absolute;
background: #fff;
width: 100%;
/*top: 1.2em;*/
border: 1px solid #efcdab;
left: -1px;
/*z-index: 999;*/
}
div.selectDiv li {
cursor: pointer;
white-space: nowrap;
word-break: keep-all;
}
div.selectDiv li:hover {
background: #0f0;
}
</style>
<body>
<div style="z-index: 1;">
<select name="birthday" id="birthday">
<option>请选择</option>
<option>1986</option>
<option>1987</option>
<option selected="selected">1988</option>
<option>1989</option>
<option>1990</option>
</select>
<select name="sex" id="sex">
<option>性别</option>
<option>男</option>
<option selected="selected">女</option>
<option>不是男，也不是女，也不是女</option>
</select>
</div>
<script type="text/javascript">
//先把select弄成个div，然后在div里面加入span放当前选择项span后面加入ul放option们
var _yl={};
_yl.initSelects = function () {
var sels = document.getElementsByTagName("select");
for(var i = 0, len = sels.length; i < len; i++) {
_yl.resetSel(sels[i]);
_yl.ctlClsName(sels[i], "none", 1);
}
//给body一个事件，为了在别的地方点击时关掉ul
//var bdy = document.getElementsByTagName("body").item(0);
_yl.EventUtil.addHandler(document, "click", function(event) {
//alert("hehe");
for (var i = 0, len = sels.length; i < len; i++) {
if (sels[i].id !== "") {
var tmpUlBox = document.getElementById("sel-div-" + sels[i].id).getElementsByTagName("ul")[0],
tmpSpan = document.getElementById("sel-div-" + sels[i].id).getElementsByTagName("span")[0];
_yl.ctlClsName(tmpUlBox, "none", 1);
_yl.ctlClsName(tmpSpan, "open");
}
}
});
};
//把一个select换成一个div
//div = selectDiv 相当于select标签
//span = optSpan 最上面的已经选择了的值
//ul = optBoxUl 放option的box
//li = optLi 对应每一项option
_yl.resetSel = function (sltEle) {
var selectDiv = document.createElement("div"),
optSpan = document.createElement("span"),
optBoxUl = document.createElement("ul"),
opts = sltEle.getElementsByTagName("option");
selectDiv.id = "sel-div-"+sltEle.id;
_yl.ctlClsName(selectDiv, "selectDiv", 1);
//循环一个select下的option们。每个的text放入li
for (var i = 0, len = opts.length; i < len; i++) {
var opt = opts[i];
var optLi = document.createElement("li");
optLi.appendChild(document.createTextNode(opt.text));
//给li绑定事件
_yl.bindLiEvent(optLi, opt, optSpan);
optBoxUl.appendChild(optLi);
//当被选中的时候，给span里面给值
if (opt.selected) {
//给li是当前已选择的时候加入不同的样式。
//optLi.className += "seled ";
_yl.ctlClsName(optLi, "seled", 1);
optSpan.appendChild(document.createTextNode(opt.text));
}
}
//到了这里，dom对象有了。加入事件。
//span点击事件需要显示后面的ul
//li点击事件加入改span值与不显示ul，
//最重要，需要更改对应的select的selected的option
//把当前opt对象值给bind函数
//optBoxUl.className += "seled ";
selectDiv.appendChild(optSpan);
//给span绑定事件
_yl.bindSpanEvent(optSpan, optBoxUl);
_yl.ctlClsName(optBoxUl, "none", 1);
selectDiv.appendChild(optBoxUl);
sltEle.parentNode.insertBefore(selectDiv, sltEle);
};
//给一个li绑定事件
_yl.bindLiEvent = function (liEle, optEle, spanEle) {
_yl.EventUtil.addHandler(liEle, "click", function (event) {
event = _yl.EventUtil.getEvent(event);
//var target = _yl.EventUtil.getTarget(event);
//alert(new Date()+target.innerHTML+"\n"+liEle.innerHTML);
spanEle.innerHTML = optEle.text;
optEle.selected = true;
var ulEle = liEle.parentNode.getElementsByTagName("li");
//清除li们的类名
for (var i = 0,len = ulEle.length; i < len; i++) {
var tmpLi = ulEle[i];
_yl.ctlClsName(tmpLi, "seled");
}
//加入已选的类名
_yl.ctlClsName(liEle, "seled", 1);
//给ul加入none
_yl.ctlClsName(liEle.parentNode, "none", 1);
//取掉span的open类名
_yl.ctlClsName(spanEle, "open");
_yl.EventUtil.stopPropagation(event);
});
};
_yl.bindSpanEvent = function (spEle, ulEle) {
_yl.EventUtil.addHandler(spEle, "click", function (event) {
if (/none/.test(ulEle.className)) {
_yl.ctlClsName(ulEle, "none");
_yl.ctlClsName(spEle, "open", 1);
} else {
_yl.ctlClsName(ulEle, "none", 1);
_yl.ctlClsName(spEle, "open");
}
_yl.EventUtil.stopPropagation(event);
});
};
/**
* 增删类名
* 当前element有指定类名时，不加，返回1
* 没有指定的时候加。
* 调用方式：
* var hehe = document.getElementById("hehe");
* _yl.ctlClsName(hehe, "none", 1); //为id为hehe的节点加入值为none的class值。
* if (_yl.ctlClsName(hehe, "none", 1)) {
_yl.ctrlClsName(hehe, "none");
} //如果有none，就取掉
*/
_yl.ctlClsName = function (ele, clsName, flag) {
var clN = ele.className;
if (clN === undefined) {
return;
}
//增
if (flag) {
if (clN !== "") {
if (new RegExp(clsName).test(clN)) {
return 1;
}
ele.className = clN.replace(/\s$/, " "+clsName+" ");
} else {
ele.className = clsName + " ";
}
//删
} else {
if (clN !== "") {
ele.className = clN.replace(clsName+" ","");
}
}
};
/**
* EventUtils
*/
_yl.EventUtil= {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on"+type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.addEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.attachEvent) {
element.detachEvent("on"+type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
_yl.initSelects();
</script>
</body>自己写的一个用js把select换成div与span与ul的东西的更多相关文章
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
sql server 关于表中只增标识问题 由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...
- JS将秒换成时分秒实现代码 [mark]
将秒换成时分秒的方法有很多,在本文将为大家介绍下,使用js的具体的实现思路,有需要的朋友可以参考下,希望对大家有所帮助 http://www.jb51.net/article/41098.htm fu ...
- JS将秒换成时分秒
function formatSeconds(value) { var theTime = parseInt(value);// 秒 var theTime1 = 0;// 分 va ...
- 一个简单js select插件
现在,通过一个select插件,来介绍一下js插件的构建过程. 1.先上效果图 2.目录构建 (1)这个select插件,我给它起名交hongselect,所以呢,首先建个hongselect的文件夹 ...
- 需要一个分页，花了一个钟写了一个，刚学js，不是很完美
<script src="js/jquery.min.js" ></script> <script type="text/javascrip ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 用css3+js写了一个钟表
有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...
- 使用纯js写的一个分页
上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...
- 用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
随机推荐
- pycharm 远程调试代码
我们在本地开发的时候,有时候需要使用到远程服务器的环境,如我们在调试微信或支付宝支付的时候. 那我们如何通过本地pycharm环境连接远程服务器进行调试呢? 1.pycharm和远程服务器连接 1)点 ...
- boost学习目录
Boost之数值转换lexical_cast https://www.cnblogs.com/TianFang/archive/2013/02/05/2892506.html Boost之字符串算法s ...
- vmware workstation安装教程以及其中出现的错误解决方法
VMware Workstation 安装教程 1 下载好虚拟机,然后运行,点击下一步 2 选择我接受,下一步 3 选择安装的位置,可以自己选择,也可以默认不更改,这个无影响(图中I:\下面的VM ...
- flex.css
flex.css:https://codepen.io/webstermobile/pen/apXEER/
- Python中的函数定义方法
def test(x): "hjkasgd" x += 1 return x def——定义函数的关键字 test——函数名 ()——内可定义形参 ""——文档 ...
- Java Selenium中的几种等待方式
Selenium自动化性能测试过程中,经常会出现取不到界面元素,主要原因是界面元素的加载与我们访问页面的时机不一致.可能是界面要素过多或者网络较慢,界面一直加载中:为了解决这种问题,selenium提 ...
- P5057 [CQOI2006]简单题
题目描述 有一个 n 个元素的数组,每个元素初始均为 0.有 m 条指令,要么让其中一段连续序列数字反转——0 变 1,1 变 0(操作 1),要么询问某个元素的值(操作 2). 例如当 n = 20 ...
- MySQL性能优化神器—explain
一.explain是什么? 简单来讲就是官方给的一个优化工具,直接在你的SQL语句前加上explain,执行整条语句,之后你就可以根据执行结果优化你的SQL啦,废话不多说,直接刚实例 测试实例 1.创 ...
- Linux(Ubuntu)使用日记------markdown文档转化为word文档
Linux(Ubuntu)使用日记------markdown文档转化为word文档
- 浅析 Scala 构造器
2019-04-15 关键字:Scala 主构造器.Scala 辅助构造器.Scala 构造器的区别 本篇文章系笔者根据当前所掌握知识对 Scala 构造器的一些心得总结,不保证文章所述内容的绝对.完 ...