模仿combox(select)控件，不用为美化select烦恼了。


            不用整天为美化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; 
} 
 
 

 
 
<!-- 
//------------------------------------------------------------- 
//  @ 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. 
//------------------------------------------------------------- 

function $(objID) 
{ 
    return document.getElementById(objID); 
}; 
function Offset(e) 
{ 
    var t = e.offsetTop; 
    var l = e.offsetLeft; 
    var w = e.offsetWidth; 
    var h = e.offsetHeight-2; 

    while(e=e.offsetParent) 
    { 
        t+=e.offsetTop; 
        l+=e.offsetLeft; 
    } 
    return { 
        top : t, 
        left : l, 
        width : w, 
        height : h 
    } 
} 
//----------------------------------------------- 
function simulateSelect(handlerFunction) { with(this) 
{ 
    this.IDs = []; 
    this.name = this; 
    this.value = null; 
    this.onchangeArgs = []; 
    this.onchange = handlerFunction; 
    this.height = 20; 
    this.width = null; 
    this.number = null; 
    this.ctlStyle = "CtlSelect"; 
    this.selStyle = "selected"; 
    this.unselStyle = "unselected"; 
    this.elementPrefix = "e__"; 
    this.inputPrefix = "i__"; 
    this.containerPrefix = "c__"; 
    this.buttonPrefix = "b__"; 
    //  property for beta Version 
    //  can editable combox 
    this.readonly = true; 
    if( arguments.length>0 ) 
    for(var i=0; i<arguments.length; i++) 
    onchangeArgs[i-1] = arguments[i]; 
    return this; 
}}; 
simulateSelect.prototype.init = function(ctlSelIDs) { with(this) 
{ 
    eval(name).append(ctlSelIDs); 
    eval(name).simulates(); 
}}; 

simulateSelect.prototype.style = function() { with(this) 
{ 
    ctlStyle = arguments[0]; 
    selStyle = arguments[1]; 
    unselStyle = arguments[2]; 
}}; 
//----------------------------------------------- 
simulateSelect.prototype.append = function(ctlSelIDs) { with(this) 
{ 
    if( ctlSelIDs.indexOf(",")>0 ) 
    { 
        var arrCtlSel = ctlSelIDs.split(","); 
        for(var i=0; i<arrCtlSel.length; i++) 
        { 
            IDs.push(arrCtlSel[i]); 
        } 
    } 
    else 
    IDs.push(ctlSelIDs); 
}}; 
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this) 
{ 
    // here compatible mf. 
    var el = e ? e.srcElement : e.target; 
    if( el.id.indexOf(elementPrefix)>-1 ||  
    el.id.indexOf(inputPrefix)>-1 ||  
    el.id.indexOf(containerPrefix)>-1 ||  
    el.id.indexOf(buttonPrefix)>-1 ) 
    { 
        return; 
    } 
    else 
    { 
        for(var i=0; i<eval(name).IDs.length; i++) 
        if( $(containerPrefix + IDs[i]) ) 
        $(containerPrefix + IDs[i]).style.display = "none"; 
    } 

}}; 
simulateSelect.prototype.simulates = function() { with(this) 
{ 
    for(var i=0; i<IDs.length; i++) 
    eval(name).simulate(IDs[i]); 
}}; 
simulateSelect.prototype.simulate = function(ctlSelID) { with (this) 
{ 
    var input; 
    var button; 
    var object; 
    var offset; 

    object = $(ctlSelID); 
    offset = Offset(object); 
    input = document.createElement("INPUT"); 
    button = document.createElement("BUTTON"); 
    button.setAttribute("id", buttonPrefix + ctlSelID); 
    //button.value = "⊿"; 
    button.value = "6"; 
    button.style.fontFamily = "Webdings, Marlett"; 
    button.style.background = ""; 
    button.onclick = input.onclick = function() 
    { 
        this.blur(); 
        eval(name).expand(ctlSelID, offset); 
    }; 
    input.onselectstart = function() 
    { 
        eval(name).expand(ctlSelID, offset); 
        event.returnValue = false;  
    }; 

    input.setAttribute("id", inputPrefix + ctlSelID); 
    input.title = button.title = "click expand options"; 
    input.style.cursor = button.style.cursor = "default"; 
    input.className = button.className = ctlStyle; 
    input.style.width = (width>0 ? 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<object.length; i++) 
        { 
            div = document.createElement("DIV"); 
            div.setAttribute("id", div.id = elementPrefix + ctlSelID + i); 
            div.style.cursor = "default"; 

            if( object[i].text==$(inputPrefix + ctlSelID).value ) 
            div.className = selStyle; 
            else 
            div.className = unselStyle; 

            div.innerText = div.title = object[i].text; 
            div.style.height = height; 
            div.setAttribute("value", object[i].value); 

            div.onmouseover = function() 
            { 
                for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++) 
                { 
                    if($(containerPrefix + ctlSelID).childNodes[j]==this) 
                    $(containerPrefix + ctlSelID).childNodes[j].className = selStyle; 
                    else 
                    $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle; 
                }                         
            }; 
            div.onclick = function() 
            { 
                $(inputPrefix + ctlSelID).value = this.innerText; 
                $(containerPrefix + ctlSelID).style.display = "none"; 
                if( onchange && value!=$(inputPrefix + ctlSelID).value ) 
                { 
                    onchange.apply(this,onchangeArgs); 
                    value = $(inputPrefix + ctlSelID).value; 
                } 
            }; 
            $(containerPrefix + ctlSelID).appendChild(div); 
        } 
        return; 
    } 

    if( $(containerPrefix + ctlSelID).style.display=="none" ) 
    { 
        for(var i=0; i<object.length; i++) 
        { 
            if( object[i].text==$(inputPrefix + ctlSelID).value ) 
            $(elementPrefix + ctlSelID + i).className = selStyle; 
            else 
            $(elementPrefix + ctlSelID + i).className = unselStyle; 
        } 
        $(containerPrefix + ctlSelID).style.display="block"; 
        return; 
    } 

    if( $(containerPrefix + ctlSelID).style.display=="block" ) 
    { 
        $(containerPrefix + ctlSelID).style.display="none"; 
        return; 
    } 
}}; 
simulateSelect.prototype.getValue = function(ctlSelID) { with(this) 
{ 
    if( $(inputPrefix + ctlSelID) ) 
    return $(inputPrefix + ctlSelID).value; 
    else 
    return null; 
}}; 
simulateSelect.prototype.addEvent = function(w, h) { with(this) 
{ 
}}; 
//----------------------------------------------- 
//window.onerror = Function("return true;"); 
//  IE only. 
document.attachEvent("onmousedown", function() { 
    a.checkupOnMouseDown(event); 
    b.checkupOnMouseDown(event); 
    c.checkupOnMouseDown(event) 
}); 
window.attachEvent("onload", function() { 
    window.a = new simulateSelect(); 
    a.style("CtlSelect", "selected", "unselected"); 
    a.init("s1"); 
    //------------------------------------------- 
    window.b = new simulateSelect(); 
    b.style("CtlSelect1", "selected1", "unselected1"); 
    b.width = 300; 
    b.number = 9; 
    b.init("s2"); 
    //------------------------------------------- 
    window.c = new simulateSelect(s1onchange, "never-online", a.getValue('s1')); 
    c.style("CtlSelect2", "selected2", "unselected2"); 
    c.width = 320; 
    c.init("s3"); 
}); 
function s1onchange(para, s) 
{ 
    alert("onchage handler fire " + para + s); 
} 
//--> 
 
 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需刷新才能执行]