不用整天为美化select控件烦恼了。

1、可批量美化select控件。
2、可以有onchange句柄。
3、触发onchange的函数可带参数。
3、可以得到select的值。
4、可设置像select类似的滚动条（如大于或等于8个数目时出现滚动条）
5、可设置宽度和高度

API参考：
//首先生成一个simulateSelect的实例
//构造函数的第一个可选参数为触发onchange的函数，其它的为onchange函数的参数；
c = new simulateSelect(s1onchange, "never-online");
//设置select的CSS，第一个参数为控件的主要CSS、第二个为选中条目时的CSS、第三个为没有选中条目时的CSS
c.style("CtlSelect2", "selected2", "unselected2");
//设置select的宽度和高度；
c.width = 320;
c.height = 20;
//初始化参数为：select控件的ID，可以用逗号分离，进行批量转换；
c.init("s1,s2,s3");

下一版本将可修改combox

simulate combox control - http://www.never-online.net

body, input
{
font-family: verdana;
font-size: 9pt;
}
h1
{
font-family: tahoma;
font-size: 22pt;
text-align: left;
}
pre
{
font-size: 9pt;
font-family: verdana;
border: 1px solid #006600;
width: 400px;
padding: 10px;
background: #ffffff;
color: #006600;
}
.CtlSelect
{
border: 1px solid #006600;
font-family: verdana;
height: 20px;
color: #006600;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
background: #006600;
color: #ffffff;
height: 20px;
}
.unselected
{
height: 20px;
color: #006600;
line-height: 120%;
border-bottom: 1px solid #006600;
}
.CtlSelect1
{
border: 1px solid #003399;
font-family: verdana;
height: 20px;
color: #003399;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
background: #003399;
color: #ffffff;
height: 20px;
}
.unselected1
{
height: 20px;
color: #003399;
line-height: 120%;
border-bottom: 1px solid #003399;
}
.CtlSelect2
{
border: 1px solid #990000;
font-family: verdana;
height: 20px;
color: #990000;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
background: #990000;
color: #ffffff;
height: 20px;
}
.unselected2
{
height: 20px;
color: #990000;
line-height: 120%;
border-bottom: 1px solid #990000;
}
.copyright
{
margin-top: 10px;
font-size: 9pt;
text-align: center;
color: #333;
font-weight: bold;
}

0 )
for(var i=0; i0 )
{
var arrCtlSel = ctlSelIDs.split(",");
for(var i=0; i-1 ||
el.id.indexOf(inputPrefix)>-1 ||
el.id.indexOf(containerPrefix)>-1 ||
el.id.indexOf(buttonPrefix)>-1 )
{
return;
}
else
{
for(var i=0; i0 ? width : object.offsetWidth);
height ? input.style.height=button.style.height=height : "";
input.value = value = object[0].text;
if( readonly==true ) input.readOnly=true;

// this method is only IE.
object.insertAdjacentElement("afterEnd",button);
object.insertAdjacentElement("afterEnd",input);
object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
var div;
var object = $(ctlSelID);

if( !$(containerPrefix + ctlSelID) )
{
div = document.createElement("DIV");
div.style.position = "absolute";
div.style.display = "block";
div.setAttribute("id", containerPrefix + ctlSelID);
div.className = ctlStyle;
div.style.left = offset.left;
div.style.top = offset.top + offset.height;
div.style.width = (width ? width : offset.width) + 20;
if( number )
{
div.style.height = height * number;
div.style.overflow = "auto";
}
document.body.appendChild(div);

for(var i=0; i

simulate combox control

demonstrate

normal select:
- please select your options -
option1
option2
option3
option4
option5

simulate select:
- please select your options -
1option1
1option2
1option3
1option4
1option5

scroll simulate select:
- please select your options -
2option1
2option2
2option3
2option4
2option6
2option7
2option8
2option9
2option10
2option11
2option12
2option13
2option14

onchange handler fire:
- please select your options -
3option1
3option2
3option3
3option4
3option5

Get value
append item
remove item

description

//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: http://www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ class: simulateSelect()
//
//  @ object.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ object.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ object.height=(heightPX)
//    heightPX must be a digit number.
//
//  @ object.getValue(ctlSelID)
//    ctlSelID is the unique select control ID
//
//  -------------- for the next Version ----------
//  @ object.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ object.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------

Power By blueDestiny, never-online
http://www.never-online.net

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]