最近经常与select打交道，因为ie下的select实在太丑了，css怎么搞都搞不好看，因为程序已经写得差不多了，要再去模拟select改动太大，就想着能否不改动select，同时美化它。借鉴一下这篇文章js美化select，然后自己写了一个jquery插件，补充了一些功能。
原理（这里就直接copy啦）：
第一步：将表单中的select隐藏起来。
第二步：用脚本找到select标签在网页上的绝对位置。 我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。
第三步：用脚本把select标签中的值读出来。 虽然藏起来了，但它里边的options我们还有用呢，统统取出来。
第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。
说白了，就是弄一个div把原来的select完整遮住，然后实现弹出层和原来的option交互，难点就是交互。
本文不打算讲怎么实现，源码里有注释，主要是分享，顺便说下几个需要注意的问题以及使用方法，小弟语文渣，凑合着看吧。。。
所有代码全部打包在csdn下载那里，无需积分，下载地址
先贴张效果图chrome,ff,ie，电脑上还是ie11的，ie大家不用说吧，做兼容性，select万恶啊。
使用方法
包含jquery.js，我用的1.8，然后包含jquery.beautifySelect.js，完整html测试代码。
html代码：
|
1
2
3
4
5
|
<div style="margin:20px;"> <select id="sel1"></select> <select id="sel2"></select> <button onclick="redraw()">重绘</button></div> |
sel1是要覆盖的select，sel2作为对比。button测试select内容发生变化重新覆盖。
js代码：
添加select
|
1
2
3
4
5
6
|
var _html = "";for(var i = 0;i<22;++i){ _html += "<option>" +i+"闲来无事写插件"+"</option>";}document.getElementById("sel1").innerHTML = _html;document.getElementById("sel2").innerHTML = _html; |
调用
|
1
2
3
4
5
6
7
8
|
$("#sel1").beautifySelect({ "maxShowItemNum" : 9, "downIcon" : "url(down.png) right no-repeat", "upIcon" : "url(up.png) right no-repeat"});$("#sel1").change(function(){ console.log(this.value+"改变");//观察事件}); |
顺带测试select内容发生变化后的重绘
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function redraw(){ //如果select内容发生变化，相应重绘部分 var _html = ""; for(var i = 0 ;i<13;++i){ _html += "<option>" +i+"内容改变啦"+ "</option>"; } document.getElementById("sel1").innerHTML = _html; $("#sel1").beautifySelect({ "sDivStyle" : { "border" : "1px solid red" } });} |
调用方法很简单，基本上使用过插件就知道，这里简单说下，maxShowItemNum是下拉框最大显示条数
downIcon是向下折叠图标，upIcon是向上折叠图标。这里就是css样式，可以修改select样式，下面是全部样式，有注释就不细说了。
可供选择入参
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
var defaultParObj = { "maxShowItemNum" : 10,//默认最多显示10条 "sDivStyle" : {//select覆盖层样式 "border" : "1px solid #A5A5A5", "fontSize" : "12px", "cursor" : "default" }, "hDivStyle" : {//弹出层，即下拉样式 "border" : "1px solid #7C99B7", "backgroundColor" : "#FFF", "maxHeight" : "200px", "overflowY" : "auto" }, "ulStyle" : {//因为用ul,li模拟的下拉，这里是ul的样式 "fontSize" : "12px" }, "liStyle" : {//这是li的样式，就是每一条目 "textIndent" : "4px", "height" : "20px", "lineHeight" : "20px", "cursor" : "default" }, "liOnStyle": {//鼠标移上去的样式 "backgroundColor" : "#1E90FF", "color" : "#FFF" }, "liOffStyle" : {//鼠标移开的样式 "backgroundColor" : "#FFF", "color" : "#000" } // "downIcon" : "url(...) 0 0",//向上图标 // "upIcon" : "url(...) 0 0"//向下图标};注意：因为使用的div模拟的select,浏览器上，select失去焦点后会关闭下拉，这个暂时还没想到办法实现，以前做过笨方法，给body添加click事件，判断target，但是很慢。暂时不管吧，再来项目用模拟的，这个只是为了不改写好的事件做的美化。特点：
除了上面说的不能失去焦点关闭，其他事件基本上都实现了，因为参照chrome的样式做的，不过提供属性，可以改样式。
最后附上插件源码，第一次弄,格式老不对，就直接粘了吧，代码打个包放在那啥下载那儿，亲们，欢迎吐槽！
下载链接csdn源代码下载
|