效果如图:
代码如下:
<html>
<head><title>漂亮的下拉框</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script>
// viaselect environment constants
var ss_env = new object();
ss_env.ie_version = new number(((window.navigator.appversion.split('; '))[1].split(' '))[1]);
ss_env.cr = new object();
ss_env.cr.reversebackground = '#e2519c';
ss_env.cr.reversetext = 'white';
ss_env.cr.border = '#d55c9a';
ss_env.cr.borderactive = '#ff6cb7';
ss_env.defaultheight = 20;
ss_env.buttonwidth = 13;
ss_env.optionsdivstyle = ''
+ ' display:none;'
+ ' z-index:10;'
+ ' position:absolute;'
+ ' border:1 solid '+ ss_env.cr.border+';'
+ ' background-color:white;'
+ ' scrollbar-face-color:#d4d0c8;'
+ ' scrollbar-shadow-color:white;'
+ ' scrollbar-highlight-color:#f6f5f4;'
+ ' scrollbar-3dlight-color:white'
+ ' scrollbar-darkshadow-color:#86837e;'
+ ' scrollbar-track-color:#f6f5f4;'
+ ' scrollbar-arrow-color:#86837e;';
ss_env.optionnobrstyle = ''
+ ' font-size:12px;'
+ ' font-family:奔覆;';
// sayselect variables
var ss_var = new object();
ss_var.divdummy = document.createelement("div");
ss_var.selectlist = new array();
ss_var.beventattached = false;
var ss_createdelements = new object();
img_s_src="btn_down_s.gif";
img_src="btn_down.gif";
img_blank_src="img_blank.gif";
function unloadobjects()
{
try {
if (ss_var && ss_var.selectlist)
{
for (key in ss_var.selectlist)
{
if (ss_var.selectlist[key])
{
try {
ss_var.selectlist[key].select.setattribute('ss', 0);
} catch (e) {};
delete ss_var.selectlist[key];
}
}
}
} catch (e) {};
}
attachevent("onunload", unloadobjects);
function ss_create (srchtml, listmax, bautodetect)
{
// property
this.ssid = ss_var.selectlist.length;
this.boriginalselect = (bautodetect && ss_env.ie_version < 5.5);
this.select = ss_createelement(srchtml);
this.selectedindex = this.select.selectedindex;
this.options = this.select.options;
this.width = parseint(this.select.style.width);
this.height = (this.select.style.height) ? parseint(this.select.style.height) : ss_env.defaultheight;
this.optionheight = this.height - 4;
this.blistdown = (listmax && '-'==listmax.tostring().substr(0, 1)) ? false : true;
this.listmax = (!isnan(parseint(listmax))) ? math.abs(listmax) : 100;
this.table;
this.titlediv;
this.titletable;
this.titlewrapper;
this.optionsdiv;
this.optionswrapper;
this.optionstable;
this.bfocused = false;
this.bexpanded = false;
this.breverse = false;
// private method
this.isthiseventtobecanceled = ss_isthiseventtobecanceled;
this.toggletitle = ss_toggletitle;
this.syncselectedindex = ss_syncselectedindex;
this.toggleoptions = ss_toggleoptions;
this.turnonoption = ss_turnonoption;
this.turnoffoption = ss_turnoffoption;
this.handlemousewheel = ss_handlemousewheel;
this.handleovertitle = ss_handleovertitle;
this.handleouttitle = ss_handleouttitle;
this.handleoveroption = ss_handleoveroption;
this.createtable = ss_createtable;
this.createtitlediv = ss_createtitlediv;
this.createoptionsdiv = ss_createoptionsdiv;
this.createoptiontr = ss_createoptiontr;
this.adjustoptionsdiv = ss_adjustoptionsdiv;
this.syncoptions = ss_syncoptions;
this.pressoption = ss_pressoption;
this.moveoption = ss_moveoption;
this.releaseoption = ss_releaseoption;
this.presstitle = ss_presstitle;
this.releasetitle = ss_releasetitle;
// public method
this.display = ss_display;
this.insertoption = ss_insertoption;
this.deleteoption = ss_deleteoption;
this.changeoption = ss_changeoption;
// initiate
this.createtable();
this.select.setattribute('ss', this);
if (!this.boriginalselect)
this.select.onpropertychange = ss_handlepropertychange;
ss_var.selectlist[this.ssid] = this;
}
function ss_display ()
{
document.write("<div id=ss_tempdiv></div>\n");
document.all.ss_tempdiv.appendchild(this.table);
document.all.ss_tempdiv.removenode();
}
function ss_write (srchtml, listmax, bautodetect)
{