自己写的一个用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
随机推荐
- 让自己的开源项目支持CocoaPods
测试的时候找个自己封装的方法或UI控件就可以了 这里用我刚封装的Redirect重定向的请求体为例 1, 在github上创建一个Redirect,重要:记得选择开源协议 (MIT)(如果木有GitH ...
- Ubuntu安装Navicat 12 for MySQL
环境准备 要想运行Navicat,必须先安装Wine,这个可以使用下面的命令来安装Wine: ubuntu@ubuntu ~ $ sudo apt-get install wine-stable 安装 ...
- [2019BUAA人工智能实战_陈泽寅]第1次个人作业
我们的征程是星辰和大海 一.索引 项目 内容 这个作业属于哪个课程 BUAA人工智能实战 这个作业的要求在哪里 here 我在这个课程的目标是 理论实践相结合,提升自己coding能力 这个作业在哪个 ...
- 使用Crawler框架搭建自己的爬虫框架MyCrawler
自己写一个爬虫框架的目的: 完美架构 在实际的数据采集编码过程中,发现代码比较乱,抓取数据,存储数据的代码混杂在一起,为了构建比较完美的数据采集框架 敏捷开发 将数据采集进行标准流程化,每个标准流程都 ...
- 第一个Appium脚本
测试环境 Win 10 64bit Python 3.5 Appium 1.7.2 Andriod 5.1.1 模拟器& Android 5.1 MX4 测试App:考研帮Android版 3 ...
- 源码分析 ucosii/source 任务源码详细分析
分析源码: 得先学会读文档, 函数前边的 note :是了解该程序员的思想的途径.不得不重视 代码前边的 Notes,了解思想后,然后在分析代码时看他是如何具体实现的. 1. ucosii/sour ...
- GraphQL
GraphQL 官方描述: GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时. GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地 ...
- windows环境下安装composer，然后使用composer安装Laravel
Composer 不是一个包管理器,它仅仅是一个依赖管理工具,它允许你申明项目所依赖的代码库,并在你的项目中安装这些代码库.它涉及 “packages” 和 “libraries”,但它在每个项目的基 ...
- selenium各版本jar包下载地址
http://selenium-release.storage.googleapis.com/index.html
- Mybatis插件机制以及PageHelper插件的原理
首先现在已经有很多Mybatis源码分析的文章,之所以重复造轮子,只是为了督促自己更好的理解源码. 1.先看一段PageHelper拦截器的配置,在mybatis的配置文件<configurat ...