美化下拉列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
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;
}
</style>
</HEAD></P>
<P><BODY>
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%0D%0A%3C!--%0D%0A%2F%2F-------------------------------------------------------------%0D%0A%2F%2F%20%20%40%20Module%3A%20simulate%20select%20control%2C%20IE%20only.%0D%0A%2F%2F%20%20%40%20Debug%20in%3A%20IE%206.0%0D%0A%2F%2F%20%20%40%20Script%20by%3A%20blueDestiny%2C%20never-online%0D%0A%2F%2F%20%20%40%20Updated%3A%202006-3-22%0D%0A%2F%2F%20%20%40%20Version%3A%201.0%20apha%0D%0A%2F%2F%20%20%40%20Email%3A%20blueDestiny%20%5Bat%5D%20126.com%0D%0A%2F%2F%20%20%40%20Website%3A%20http%3A%2F%2Fwww.never-online.net%0D%0A%2F%2F%20%20%40%20Please%20Hold%20this%20item%20please.%0D%0A%2F%2F%0D%0A%2F%2F%20%20API%0D%0A%2F%2F%20%20%40%20class%3A%20simulateSelect()%0D%0A%2F%2F%0D%0A%2F%2F%20%20%40%20object.style(ctlStyle%5B%2CselStyle%5D%5B%2CunselStyle%5D)%0D%0A%2F%2F%20%20%20%20ctlStyle%3A%20main%20control%20combox%20css%20class%20name%0D%0A%2F%2F%20%20%20%20selStyle%3A%20when%20mouseover%20or%20option%20focus%20css%20class%20name%0D%0A%2F%2F%20%20%20%20unselStyle%3A%20options%20blur's%20css%20class%20name%0D%0A%2F%2F%0D%0A%2F%2F%20%20%40%20object.width%3D(widthPX)%0D%0A%2F%2F%20%20%20%20widthPX%20must%20be%20a%20digit%20number.%0D%0A%2F%2F%0D%0A%2F%2F%20%20%40%20object.height%3D(heightPX)%0D%0A%2F%2F%20%20%20%20heightPX%20must%20be%20a%20digit%20number.%0D%0A%2F%2F%0D%0A%2F%2F%20%20%40%20object.getValue(ctlSelID)%0D%0A%2F%2F%20%20%20%20ctlSelID%20is%20the%20unique%20select%20control%20ID%0D%0A%2F%2F%0D%0A%2F%2F%20%20--------------%20for%20the%20next%20Version%20----------%0D%0A%2F%2F%20%20%40%20object.readOnly%20%3D%20(blnReadOnly)%0D%0A%2F%2F%20%20%20%20blnReadOnly%20must%20be%20a%20boolean%20type%20or%20a%20number%20type.%0D%0A%2F%2F%20%20%40%20object.addEvent(w%2C%20h)%0D%0A%2F%2F%20%20%20%20w%3A%20fire%20handler's%20event.%0D%0A%2F%2F%20%20%20%20h%3A%20handler%20function.%0D%0A%2F%2F-------------------------------------------------------------%3C%2FP%3E%0D%0A%3CP%3Efunction%20%24(objID)%0D%0A%7B%0D%0A%20return%20document.getElementById(objID)%3B%0D%0A%7D%3B%0D%0Afunction%20Offset(e)%0D%0A%7B%0D%0A%20var%20t%20%3D%20e.offsetTop%3B%0D%0A%20var%20l%20%3D%20e.offsetLeft%3B%0D%0A%20var%20w%20%3D%20e.offsetWidth%3B%0D%0A%20var%20h%20%3D%20e.offsetHeight-2%3B%3C%2FP%3E%0D%0A%3CP%3E%20while(e%3De.offsetParent)%0D%0A%20%7B%0D%0A%20%20t%2B%3De.offsetTop%3B%0D%0A%20%20l%2B%3De.offsetLeft%3B%0D%0A%20%7D%0D%0A%20return%20%7B%0D%0A%20%20top%20%3A%20t%2C%0D%0A%20%20left%20%3A%20l%2C%0D%0A%20%20width%20%3A%20w%2C%0D%0A%20%20height%20%3A%20h%0D%0A%20%7D%0D%0A%7D%0D%0A%2F%2F-----------------------------------------------%0D%0Afunction%20simulateSelect()%20%7B%20with(this)%0D%0A%7B%0D%0A%20this.IDs%20%3D%20%5B%5D%3B%0D%0A%20this.name%20%3D%20this%3B%0D%0A%20%2F%2F%20%20property%20for%20beta%20Version%0D%0A%20%2F%2F%20%20can%20editable%20combox%0D%0A%20this.readonly%20%3D%20true%3B%0D%0A%20this.height%20%3D%2020%3B%0D%0A%20this.width%20%3D%20null%3B%0D%0A%20this.ctlStyle%20%3D%20%22CtlSelect%22%3B%0D%0A%20this.selStyle%20%3D%20%22selected%22%3B%0D%0A%20this.unselStyle%20%3D%20%22unselected%22%3B%0D%0A%20this.elementPrefix%20%3D%20%22e__%22%3B%0D%0A%20this.inputPrefix%20%3D%20%22i__%22%3B%0D%0A%20this.containerPrefix%20%3D%20%22c__%22%3B%0D%0A%20this.buttonPrefix%20%3D%20%22b__%22%3B%0D%0A%20return%20this%3B%0D%0A%7D%7D%3B%0D%0AsimulateSelect.prototype.init%20%3D%20function(ctlSelIDs)%20%7B%20with(this)%0D%0A%7B%0D%0A%20eval(name).append(ctlSelIDs)%3B%0D%0A%20eval(name).simulates()%3B%0D%0A%7D%7D%3B%3C%2FP%3E%0D%0A%3CP%3EsimulateSelect.prototype.style%20%3D%20function()%20%7B%20with(this)%0D%0A%7B%0D%0A%20ctlStyle%20%3D%20arguments%5B0%5D%3B%0D%0A%20selStyle%20%3D%20arguments%5B1%5D%3B%0D%0A%20unselStyle%20%3D%20arguments%5B2%5D%3B%3C%2FP%3E%0D%0A%3CP%3E%7D%7D%3B%0D%0A%2F%2F-----------------------------------------------%0D%0AsimulateSelect.prototype.append%20%3D%20function(ctlSelIDs)%20%7B%20with(this)%0D%0A%7B%0D%0A%20if(%20ctlSelIDs.indexOf(%22%2C%22)%3E0%20)%0D%0A%20%7B%0D%0A%20%20var%20arrCtlSel%20%3D%20ctlSelIDs.split(%22%2C%22)%3B%0D%0A%20%20for(var%20i%3D0%3B%20i%3CarrCtlSel.length%3B%20i%2B%2B)%0D%0A%20%20%7B%0D%0A%20%20%20eval(name).IDs.push(arrCtlSel%5Bi%5D)%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%20else%0D%0A%20%7B%0D%0A%20%20eval(name).IDs.push(ctlSelIDs)%3B%0D%0A%20%7D%0D%0A%7D%7D%3B%0D%0AsimulateSelect.prototype.checkupOnMouseDown%20%3D%20function(e)%20%7B%20with(this)%0D%0A%7B%0D%0A%20%2F%2F%20here%20compatible%20mf.%0D%0A%20var%20el%20%3D%20e%20%3F%20e.srcElement%20%3A%20e.target%3B%0D%0A%20if(%20el.id.indexOf(elementPrefix)%3E-1%20%7C%7C%20%0D%0A%20el.id.indexOf(inputPrefix)%3E-1%20%7C%7C%20%0D%0A%20el.id.indexOf(containerPrefix)%3E-1%20%7C%7C%20%0D%0A%20el.id.indexOf(buttonPrefix)%3E-1%20)%0D%0A%20%7B%0D%0A%20%20return%3B%0D%0A%20%7D%0D%0A%20else%0D%0A%20%7B%0D%0A%20%20for(var%20i%3D0%3B%20i%3Ceval(name).IDs.length%3B%20i%2B%2B)%0D%0A%20%20if(%20%24(containerPrefix%20%2B%20IDs%5Bi%5D)%20)%0D%0A%20%20%24(containerPrefix%20%2B%20eval(name).IDs%5Bi%5D).style.display%20%3D%20%22none%22%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%7D%7D%3B%0D%0AsimulateSelect.prototype.simulates%20%3D%20function()%20%7B%20with(this)%0D%0A%7B%0D%0A%20for(var%20i%3D0%3B%20i%3CIDs.length%3B%20i%2B%2B)%0D%0A%20eval(name).simulate(IDs%5Bi%5D)%3B%0D%0A%7D%7D%3B%0D%0AsimulateSelect.prototype.simulate%20%3D%20function(ctlSelID)%20%7B%20with%20(this)%0D%0A%7B%0D%0A%20var%20input%3B%0D%0A%20var%20button%3B%0D%0A%20var%20object%3B%0D%0A%20var%20offset%3B%3C%2FP%3E%0D%0A%3CP%3E%20object%20%3D%20%24(ctlSelID)%3B%0D%0A%20offset%20%3D%20Offset(object)%3B%0D%0A%20input%20%3D%20document.createElement(%22INPUT%22)%3B%0D%0A%20button%20%3D%20document.createElement(%22BUTTON%22)%3B%0D%0A%20button.setAttribute(%22id%22%2C%20buttonPrefix%20%2B%20ctlSelID)%3B%0D%0A%20%2F%2Fbutton.value%20%3D%20%22%E2%8A%BF%22%3B%0D%0A%20button.value%20%3D%20%226%22%3B%0D%0A%20button.style.fontFamily%20%3D%20%22Webdings%2C%20Marlett%22%3B%0D%0A%20button.style.background%20%3D%20%22%22%3B%0D%0A%20button.onclick%20%3D%20input.onclick%20%3D%20function()%0D%0A%20%7B%0D%0A%20%20this.blur()%3B%0D%0A%20%20eval(name).expand(ctlSelID%2C%20offset)%3B%0D%0A%20%7D%0D%0A%20input.onselectstart%20%3D%20function()%20%7B%20eval(name).expand(ctlSelID%2C%20offset)%3B%20event.returnValue%20%3D%20false%3B%20%7D%3B%0D%0A%20input.setAttribute(%22id%22%2C%20inputPrefix%20%2B%20ctlSelID)%3B%0D%0A%20input.title%20%3D%20button.title%20%3D%20%22click%20expand%20options%22%3B%0D%0A%20input.style.cursor%20%3D%20button.style.cursor%20%3D%20%22default%22%3B%0D%0A%20input.className%20%3D%20button.className%20%3D%20ctlStyle%3B%0D%0A%20input.style.width%20%3D%20(width%3E0%20%3F%20width%20%3A%20object.offsetWidth)%3B%0D%0A%20height%20%3F%20input.style.height%3Dbutton.style.height%3Dheight%20%3A%20%22%22%3B%0D%0A%20input.value%20%3D%20object%5B0%5D.text%3B%0D%0A%20if(%20readonly%3D%3Dtrue%20)%20input.readOnly%3Dtrue%3B%3C%2FP%3E%0D%0A%3CP%3E%20%2F%2F%20this%20method%20is%20only%20IE.%0D%0A%20object.insertAdjacentElement(%22afterEnd%22%2Cbutton)%3B%0D%0A%20object.insertAdjacentElement(%22afterEnd%22%2Cinput)%3B%0D%0A%20object.style.display%20%3D%20'none'%3B%0D%0A%7D%7D%3B%0D%0AsimulateSelect.prototype.expand%20%3D%20function(ctlSelID%2C%20offset)%20%7B%20with(this)%0D%0A%7B%0D%0A%20var%20div%2C%20btn_off%3B%0D%0A%20var%20object%20%3D%20%24(ctlSelID)%3B%3C%2FP%3E%0D%0A%3CP%3E%20if(%20!%24(containerPrefix%20%2B%20ctlSelID)%20)%0D%0A%20%7B%0D%0A%20%20div%20%3D%20document.createElement(%22DIV%22)%3B%0D%0A%20%20div.style.position%20%3D%20%22absolute%22%3B%0D%0A%20%20div.style.display%20%3D%20%22block%22%3B%0D%0A%20%20div.setAttribute(%22id%22%2C%20containerPrefix%20%2B%20ctlSelID)%3B%0D%0A%20%20div.className%20%3D%20ctlStyle%3B%0D%0A%20%20div.style.left%20%3D%20offset.left%3B%0D%0A%20%20div.style.top%20%3D%20offset.top%20%2B%20offset.height%3B%0D%0A%20%20div.style.width%20%3D%20(width%20%3F%20width%20%3A%20offset.width)%20%2B%2020%3B%0D%0A%20%20div.style.height%20%3D%20offset.height%3B%0D%0A%20%20document.body.appendChild(div)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20for(var%20i%3D0%3B%20i%3Cobject.length%3B%20i%2B%2B)%0D%0A%20%20%7B%0D%0A%20%20%20div%20%3D%20document.createElement(%22DIV%22)%3B%0D%0A%20%20%20div.setAttribute(%22id%22%2C%20div.id%20%3D%20elementPrefix%20%2B%20ctlSelID%20%2B%20i)%3B%0D%0A%20%20%20div.style.cursor%20%3D%20%22default%22%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20if(%20object%5Bi%5D.text%3D%3D%24(inputPrefix%20%2B%20ctlSelID).value%20)%0D%0A%20%20%20div.className%20%3D%20selStyle%3B%0D%0A%20%20%20else%0D%0A%20%20%20div.className%20%3D%20unselStyle%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20div.innerText%20%3D%20div.title%20%3D%20object%5Bi%5D.text%3B%0D%0A%20%20%20div.style.height%20%3D%20height%3B%0D%0A%20%20%20div.setAttribute(%22value%22%2C%20object%5Bi%5D.value)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20div.onmouseover%20%3D%20function()%0D%0A%20%20%20%7B%0D%0A%20%20%20%20for(var%20j%3D0%3B%20j%3C%24(containerPrefix%20%2B%20ctlSelID).childNodes.length%3B%20j%2B%2B)%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20if(%24(containerPrefix%20%2B%20ctlSelID).childNodes%5Bj%5D%3D%3Dthis)%0D%0A%20%20%20%20%20%24(containerPrefix%20%2B%20ctlSelID).childNodes%5Bj%5D.className%20%3D%20selStyle%3B%0D%0A%20%20%20%20%20else%0D%0A%20%20%20%20%20%24(containerPrefix%20%2B%20ctlSelID).childNodes%5Bj%5D.className%20%3D%20unselStyle%3B%0D%0A%20%20%20%20%7D%20%20%20%20%20%20%0D%0A%20%20%20%7D%3B%0D%0A%20%20%20div.onclick%20%3D%20function()%0D%0A%20%20%20%7B%0D%0A%20%20%20%20%24(inputPrefix%20%2B%20ctlSelID).value%20%3D%20this.innerText%3B%0D%0A%20%20%20%20%24(containerPrefix%20%2B%20ctlSelID).style.display%20%3D%20%22none%22%3B%0D%0A%20%20%20%7D%3B%0D%0A%20%20%20%24(containerPrefix%20%2B%20ctlSelID).appendChild(div)%3B%0D%0A%20%20%7D%0D%0A%20%20return%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20if(%20%24(containerPrefix%20%2B%20ctlSelID).style.display%3D%3D%22none%22%20)%0D%0A%20%7B%0D%0A%20%20for(var%20i%3D0%3B%20i%3Cobject.length%3B%20i%2B%2B)%0D%0A%20%20%7B%0D%0A%20%20%20if(%20object%5Bi%5D.text%3D%3D%24(inputPrefix%20%2B%20ctlSelID).value%20)%0D%0A%20%20%20%24(elementPrefix%20%2B%20ctlSelID%20%2B%20i).className%20%3D%20selStyle%3B%0D%0A%20%20%20else%0D%0A%20%20%20%24(elementPrefix%20%2B%20ctlSelID%20%2B%20i).className%20%3D%20unselStyle%3B%0D%0A%20%20%7D%0D%0A%20%20%24(containerPrefix%20%2B%20ctlSelID).style.display%3D%22block%22%3B%0D%0A%20%20return%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20if(%20%24(containerPrefix%20%2B%20ctlSelID).style.display%3D%3D%22block%22%20)%0D%0A%20%7B%0D%0A%20%20%24(containerPrefix%20%2B%20ctlSelID).style.display%3D%22none%22%3B%0D%0A%20%20return%3B%0D%0A%20%7D%0D%0A%7D%7D%3B%0D%0AsimulateSelect.prototype.getValue%20%3D%20function(ctlSelID)%20%7B%20with(this)%0D%0A%7B%0D%0A%20if(%20%24(inputPrefix%20%2B%20ctlSelID)%20)%0D%0A%20return%20%24(inputPrefix%20%2B%20ctlSelID).value%3B%0D%0A%20else%0D%0A%20return%20null%3B%0D%0A%7D%7D%3B%0D%0AsimulateSelect.prototype.addEvent%20%3D%20function(w%2C%20h)%20%7B%20with(this)%0D%0A%7B%0D%0A%7D%7D%3B%0D%0A%2F%2F-----------------------------------------------%0D%0A%2F%2Fwindow.onerror%20%3D%20Function(%22return%20true%3B%22)%3B%0D%0A%2F%2F%20%20IE%20only.%0D%0Adocument.attachEvent(%22onmousedown%22%2C%20function()%20%7B%0D%0A%20%20%20%20%20%20a.checkupOnMouseDown(event)%3B%0D%0A%20%20%20%20%20%20b.checkupOnMouseDown(event)%3B%0D%0A%20%20%20%20%20%20c.checkupOnMouseDown(event)%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20)%3B%0D%0A%2F%2F--%3E%0D%0A%3C%2FSCRIPT%3E">
<h1> simulate combox control </h1>
<h4> demonstrate </h4></P>
<P><p>
<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p></P>
<P><p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p></P>
<P><p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p></P>
<P><p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p></P>
<P><button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button></P>
<P><img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%0D%0A%3C!--%0D%0A%20var%20a%20%3D%20new%20simulateSelect()%3B%0D%0A%20a.style(%22CtlSelect%22%2C%20%22selected%22%2C%20%22unselected%22)%3B%0D%0A%20a.init(%22s1%22)%3B%0D%0A%20var%20b%20%3D%20new%20simulateSelect()%3B%0D%0A%20b.style(%22CtlSelect1%22%2C%20%22selected1%22%2C%20%22unselected1%22)%3B%0D%0A%20b.width%20%3D%20300%3B%0D%0A%20b.init(%22s2%22)%3B%0D%0A%20var%20c%20%3D%20new%20simulateSelect()%3B%0D%0A%20c.style(%22CtlSelect2%22%2C%20%22selected2%22%2C%20%22unselected2%22)%3B%0D%0A%20c.width%20%3D%20320%3B%0D%0A%20c.init(%22s3%22)%3B%0D%0A%2F%2F--%3E%0D%0A%3C%2FSCRIPT%3E"></P>
<P><h4> description </h4>
<pre>
//-------------------------------------------------------------
//  @ 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
//  @ simulateSelect(ctlSelIDs)
//    ctlSelIDs: select control IDs, split by ","
//
//  @ simulateSelect.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
//
//  @ simulateSelect.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ simulateSelect.height=(heightPX)
//    heightPX must be a digit number.
//
//  -------------- for the next Version ----------
//  @ simulateSelect.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ simulateSelect.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
</pre></P>
<P><div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net
</div>
</BODY>
</HTML>

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

教程首页更多教程