自己写的一个用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
随机推荐
- openstack 2019/4/28
官网参考地址:https://docs.openstack.org/keystone/queens/install/index-rdo.html (但愿能看懂) 环境:这个部分解释如何按示例架构配置控 ...
- 浅谈 C# SQL防注入
1#region 防止sql注入式攻击(可用于UI层控制) 2 3/// 4/// 判断字符串中是否有SQL攻击代码 5/// 6/// 传入用户提交数据 7/// true-安全:f ...
- Var的用法解析
C#关键字是伴随着.NET 3.5以后,伴随着匿名函数.LINQ而来, 由编译器帮我们推断具体的类型.总体来说,当一个变量是局部变量(不包括类级别的变量),并且在声明的时候初始化,是使用var关键字的 ...
- CSS如何把一张横向的长图变成竖向的？
前言: 有时候做项目过程中,设计的是一张横向的长图,但是我们需要在手机端观看的时候,也想把手机横着观看,这样视野更宽阔,如何解决这个问题呢? html <div class="imgB ...
- Springboot+mybatis中整合过程访问Mysql数据库时报错
报错原因如下:com.mysql.cj.core.exceptions.InvalidConnectionAttributeException: The server time zone.. 产生这个 ...
- Python之操作HBASE数据库
目前有两个库可以操作HBASE:hbase-thrift 和 happybase happybase使用起来比较简单方便,因此重点学习该库,hbase-thrift只做简要介绍. (一)hbase- ...
- Java队列学习
队列是Java集合中的重要组成部分,具有先进先出的特性,使其具有广泛的应用场景,比如排队等.因此今天就来学习一下Java中的队列.本文的例子使用的Java8环境. 继承类图 学习队列,首先要知道它的类 ...
- codeforces 796A-D
决定在 codeforces 练题啦,决定每个比赛刷前四道...太难就算了 796A Buying A House 题意:给出x轴上的n 个点,每个点有个权值,问离m 点最近的权值小于等于k 的点离m ...
- Linux查看文件大小
//查看系统中文件的使用情况 df -h //查看当前目录下各个文件及目录占用空间大小 du -sh * //查看welcome.txt文件占用空间大小 du -sh welcome.txt //方法 ...
- DAY29、元类
一.eval内置函数eval内置函数的使用场景: 1.执行字符串会得到相应的执行结果 2.一般用于类型转换,得到dict.list.tuple例: dic_str = ''{'a':1,'b':2}' ...