自己写的一个用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
随机推荐
- C#技巧记录——持续更新
作为一名非主修C#的程序员,在此记录下学习与工作中C#的有用内容,持续更新 对类型进行约束,class指定了类型必须是引用类型,new()指定了类型必须具有一个无参的构造函数 where T : cl ...
- Python进阶6---序列化与反序列化
序列化与反序列化*** 为什么要序列化 ? 定义 pickle库 #序列化实例 import pickle lst = 'a b c'.split() with open('test.txt','wb ...
- springdata 动态查询之排序
- 深入理解 GIL：如何写出高性能及线程安全的 Python 代码
深入理解 GIL:如何写出高性能及线程安全的 Python 代码 本文由 伯乐在线 - 郑芸 翻译.未经许可,禁止转载!英文出处:A. Jesse.欢迎加入翻译组. GIL对多线程的影响:http:/ ...
- 洛谷P1512伊甸园的日历游戏题解
题目 因为可能要参加qbxt的数论考试,所以最近要开始猛刷数论题了. 这是第一道,不过看样子并不想数论题啊,只是一个博弈论. 思路 一位著名老师说过,数学就是转化和化简,所以先考虑化简,先考虑化简年份 ...
- 【WebSocket】WebSocket介绍
1.背景 在WebSocket出现之前客户端向服务器发出请求是通过http协议实现的,而http协议有个特点是通行请求只能由客户端发起,然后服务端响应查询结果,HTTP 协议没法让服务器主动向客户端推 ...
- 仿照selalchemy实现简单的mongo查询
首先这是一个很奇葩的需求,时间紧迫顺手胡写了一个,以后看看有没有好的思路 def and_(item_list): return "%s:[%s]" % ("$and&q ...
- 【学习笔记】TensorFlow
1. tf.Graph().as_default() 的作用 首先看官网上的解释: 再看博主 Joanna-In-Hdu&Hust 对此比较通俗易懂的解释(https://www.cnblog ...
- Nginx下配置SSL模块，支持https
Http与Https的区别 HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效 ...
- 深入了解SQL的四种连接&不然要命的！
1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 stude ...