最近经常与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源代码下载
|