自己写的一个用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
随机推荐
- 5年后，我们为什么要从 Entity Framework 转到 Dapper 工具？
前言 时间退回到 2009-09-26,为了演示开源项目 FineUI 的使用方法,我们发布了 AppBox(通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块),最初的 ...
- 【故障公告】推荐系统中转站撑爆服务器 TCP 连接引发的故障
上周五下午,我们在博客中部署了推荐系统,在博文下方显示“最新IT新闻”的地方显示自动推荐的关联博文.我们用的推荐系统是第四范式的推荐服务,我们自己只是搭建了一个推荐系统中转站(基于 ASP.NET C ...
- 基于配置文件的方式配置AOP
之前说的都是通过注释的方式配置,接下来说说如何使用配置文件配置AOP 还是原来的代码,去掉所有注释,接下来配置最基本的几个bean. 然后使用<aop:config>标签进行配置,然后配切 ...
- django 日志logging的配置以及处理
django日志官方文档https://docs.djangoproject.com/en/1.11/topics/logging/ 本文摘自http://davidbj.blog.51cto.com ...
- Python——模块——配置模块（ConfigParser）
一.读取 read(filename) 直接读取ini文件内容 sections() 得到所有的section,并以列表的形式返回 options(section) 得到该section的所有opt ...
- Nginx CONTENT阶段 concat模块
L67 concat_delimiter : 根据js 指定 分隔符 比如 “|” 那么每个文件分隔符为 “|” concat_types : 指定要合并文件的类型 concat_unique : s ...
- java常用类-上
一,常用类之一包装类 java开发中习惯把八大基本数据类型封装到一个类中,并提供属性和方法,更方便的操作基本数据类型. 包装类的出现并不是用于取代基本数据类型,也取代不了. 包装类位于java.lan ...
- SQL SERVER2000将多行查询结果拼接到一行数据及函数的创建
处理前的查询结果如上图: 通过借助SQL变量的定义 ) DECLARE @Num int SET @Scope='' ), ' ' GROUP BY ContractID 实现了一下效果: //创建拼 ...
- java文件运行的过程
javac .java——>编译成.class文件(字节码) 参考: https://www.cnblogs.com/yxwkf/p/3855363.html https://www.jians ...
- The King’s Problem HDU - 3861（连通图 缩点 匹配）
在一个王国里面, 国王有一个新的问题. 皇城中有N个城市M条单行路,为了让他的王国更加高效,国王想要将他的王国划分成几个州,每个城市必须属于一个州.对于两个城市(u,v),必须满足以下3个条件: ...