后使用快捷导航没有帐号？
只需一步，快速开始
查看: 41505|回复: 14
如何改变SELECT下拉列表的样式
UID17448在线时间 小时积分17339帖子离线17198 天注册时间
有个朋友问我的，我也没办法解决成完美的，所以拿来问问大家：
请问如何改变SELECT下拉列表的样式?!
包括下拉按钮(带黑色倒三角的那个)\背景颜色\列表框边框等!!
在很多地方发问过,但没人能回答,来这里试试!
希望有意外惊喜!
因为这个太影响网页的美观了!
UID14309在线时间 小时积分14721帖子离线17198 天注册时间
.box{border:1px solid
#C0C0C0;width:182height:19clip:rect(0px,181px,18px,0px);overflow:}
.box2{border:1px solid
#F4F4F4;width:180height:17clip:rect(0px,179px,16px,0px);overflow:}
select{position:left:-2top:-2font-size:12width:183line-height:14bo
rder:0color:#909993;}
&div class=box&&div class=box2&&select
hidefocus&
&option selected&网站的封面
&option value=031113&上海夏天(一一友情提供)
&option value=031106&上海夏天(一)
&option value=030916&上海夏天出版了
&option value=031018&在雨中(二)
&option value=030915&开往黎明的地铁(二)
&option value=030913&开往黎明的地铁
&option value=031029&亲爱的你们在干什么
&option value=000000&更多封面……
&/select&&/div&&/div&
&提示：您可以先修改部分代码再运行
UID54233在线时间 小时积分4592帖子离线17198 天注册时间
金牌会员, 积分 4592, 距离下一级还需 408 积分
好东东,我都找了好久了,收藏
UID42631在线时间 小时积分753帖子离线17198 天注册时间
高级会员, 积分 753, 距离下一级还需 247 积分
不支持XHTML规范，为此郁闷了好久
难以取舍，而且似乎兼容性不好
UID113524在线时间 小时积分38525帖子离线17198 天注册时间
select的样式修饰顶多是：改文字的颜色、大小、字体，改整个背景色，改每条option的背景色。除此之外的修饰都得用模拟的方法获得，例如：
&select name=&select& style=&background:#FF0000;color:white&&
&option &dfffffffffffff&/option&
&option&ddddddddddddd&/option&
&option&ddddddddddddddddd&/option&
&option&eeeeeeeeeeeeeeee&/option&
&option&eeeeeeeeeeeeeeee&/option&
&br&&br&&br&&br&&br&&br&&br&&br&
&form name=&form1&&
&select name=&select01&&
&option& &/option&
&option&2222222&/option&
&option&333333&/option&
&option&4444444&/option&
&span style=&position:left:-23width:17height:17font:7px 'wingdings 3';color:#cc0000;background:border:2text-align:padding-top:3cursor:default& onclick=&if(i&=document.form1.select01.options.length){i=0}document.form1.select01.options[i].selected=i++&&q
&iframe src=&& style=&position:top:0;left:0;z-index:-1; width:15height:15filter:alpha(opacity=0))& frameborder=&0&&&/iframe&
&br&&br&&br&&br&&br&&br&
&提示：您可以先修改部分代码再运行
&title&Untitled Document&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
.table1{background-color:FONT-FAMILY: Courier New, Cfont-size:12px}
.td_out{FONT-FAMILY: Courier New, Cfont-size:12color:#000000;height:15border:1 solid #}
.td_over{FONT-FAMILY: Courier New, Cfont-size:12cursor:background-color:#3366border:1 solid #000000;color:#height:15px}
.slv{vertical-align:FONT-FAMILY: Courier New, Cfont-size:12border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:height:18color:#000000;}
.down{position:left:-2font-size:11vertical-align:width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-font-weight:
position:z-index:1000;overflow-x:border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;
SCROLLBAR-FACE-COLOR: #d0dff7;
SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #
SCROLLBAR-TRACK-COLOR: #
SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}
&script language=&JavaScript&&
document.onclick=hiddenD
function getDivCount() {
var arr=document.
for (i=0;i&arr.i++) {
str=arr[i].
if (str.indexOf(&ZfDiv_&)==0) {
function getI(ObjId) {//取得objId的最后一位数字
for (i=0;i&ObjId.i++) {
if (ObjId.charAt(i)==&_&) return ObjId.substr(i+1,ObjId.length-1);
function select_edit(TextObj){//鼠标经过高亮度
TextObj.focus();TextObj.select();
function checkValue(ID){
var sl=document.all[&ZfText_&+ID];
var sv=document.all[&ZfDiv_&+ID];
var da=document.all[&ZfData_&+ID];
sv.style.display=''
for(i=0;i&da.rows.i++)da.rows[i].style.display=''
for(i=0;i&da.rows.i++){
if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';
getPosition(ID);
function getL(e){
var l=e.offsetL
while(e=e.offsetParent){
l+=e.offsetL
function getT(e){
var t=e.offsetT
while(e=e.offsetParent){
t+=e.offsetT
function getPosition(ID){
var sv=document.all[&ZfDiv_&+ID];
var sl=document.all[&ZfText_&+ID];
var spn=document.all[&ZfSpan_&+ID];
var da=document.getElementById(&ZfData_&+ID);
sv.style.pixelWidth=spn.offsetW
da.style.pixelWidth=sv.offsetW
sv.style.pixelLeft=getL(spn);
sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;
if(da.offsetHeight&200){
sv.style.pixelHeight=200;
sv.style.overflowY='scroll';
sv.style.pixelHeight=da.offsetH
sv.style.overflowY='hidden';
function dropDown(ID){
var sv=document.all[&ZfDiv_&+ID]
var tb=document.all[&ZfData_&+ID]
if(sv.style.display=='none'){
sv.style.display='';
for(i=0;i&tb.rows.i++)tb.rows[i].style.display=''
getPosition(ID);
sv.style.display='none';
}//下拉摸拟层
function hiddenDiv(){
var o=window.event.srcElement.
if(o==&&) {
for (j=0;j&getDivCount();j++) {
tb=document.getElementById('ZfData_'+j);
sv=document.getElementById('ZfDiv_'+j);
for(i=0;i&tb.rows.i++) tb.rows[i].style.display='';
sv.style.display='none';
}//隐藏模拟层
function setValue(obj){
var i=getI(obj.parentElement.parentElement.parentElement.id);
//alert(obj.parentElement.parentElement.parentElement.id);
var sl=document.all[&ZfText_&+i];
var sv=document.all['ZfDiv_'+i];
sl.value=obj.innerT
sv.style.display='none';
//sldIndex=obj.parentElement.rowI
}//给文本框赋值
function over(obj){
obj.className=&td_over&
obj.title=obj.innerText
obj.focus();
}//鼠标经过变色
function out(obj){
obj.className=&td_out&
}//鼠标离开还原
function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
//增加list的接口,ID表示该组控件是页面中的第几个
function add(v,ID){
var sv=document.all['ZfDiv_'+ID];
if(!v.Trim()){}
var tb=document.all['ZfData_'+ID];
var c=tb.insertRow(tb.rows.length).insertCell();
c.innerHTML='&nobr&'+v.Trim()+'&/nobr&';
c.onmouseover=new Function(&over(this)&);
c.onmouseout=new Function(&out(this)&);
c.onclick=new Function(&setValue(this)&);
c.className=&td_out&;
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addText(name,DefValue) {
var i=getDivCount();
document.write('&span id=&ZfSpan_'+i+'& style=&border:1 solid #9CA0CB&&');
document.write('&input type=&text& value=&'+DefValue+'& name=&'+name+'& id=&ZfText_'+i+'& ondblclick=&ZfDrop_'+i+'.click()& class=&slv& onmouseover=&select_edit(this)&
onkeyup=&checkValue('+i+')&&&input type=button id=&ZfDrop_'+i+'& value=&&& onclick=&this.hideFocus=dropDown('+i+');& class=&down& onmouseover=&this.style.backgroundColor=#EEF3FD& onmouseout=&this.style.backgroundColor=\'\'& onmousedown=&this.style.backgroundColor=#ABC4F5& onmouseup=&this.style.backgroundColor=\'\'&&&/span&');
document.write('&div id=&ZfDiv_'+i+'& class=&seldiv& style=&display:&&&table id=&ZfData_'+i+'& onselectstart=&return false& border=&0&
cellspacing=&0& cellpadding=&0& class=&table1&&&/table&&/div&');
&script language=&JavaScript&&
addText(&name1&,&a&);
add(&1234&,0);
add(&1234&,0);
addText(&name1&,&a&);
add(&1234&,1);
add(&1234&,1);
&br&&br&&br&&br&&br&&br&
.select{border: 0 width: 100; font: cursor:}
.selected{border: 0 background: padding: 0; font:}
.selectTable{height: 100%; width: 100%;border: 2 i background:}
{font: padding: 1; padding-left: 3; padding-right: 3; width: 100%;}
.dropDown{position: visibility: width: 100%;border: 1 padding: 0;background:}
.select .button
{width: 16 height: 5; font-family: padding: 0;font-size: 11 border: 2 ou}
&script type=&text/javascript&&
var overOptionCss = &background: color: highlighttext&;
var sizedBorderCss = &2 inset buttonhighlight&;
var globalS
var ie4 = (document.all != null);
var q = 0;
function initSelectBox(el) {
copySelected(el);
var size = el.getAttribute(&size&);
el.options = el.children[1].
el.selectedIndex = findSelected(el);
el.remove = new Function(&i&, &int_remove(this,i)&);
= new Function(&i&, &return this.options[i]&);
= new Function(&e&, &i&, &int_add(this, e, i)&);
el.options[el.selectedIndex].selected =
dropdown = el.children[1];
if (size != null) {
if (size & 1) {
dropdown.style.zIndex = 0;
initSized(el);
el.size = 1;
dropdown.style.zIndex = 99;
if (dropdown.offsetHeight & 200) {
dropdown.style.height = &200&;
dropdown.style.overflow = &auto&;
highlightSelected(el,true);
function int_remove(el,i) {
if (el.options[i] != null)
el.options[i].outerHTML = &&;
function int_add(el, e, i) {
var html = &&div class='option' noWrap&;
if (e.value != null)
html += & value='& + e.value + &'&;
if (e.style.cssText != null)
html += & style='& + e.style.cssText + &'&;
html += &&&;
if (e.text != null)
html += e.
html += &&/div&&
if ((i == null) || (i &= el.options.length))
i = el.options.length-1;
el.options[i].insertAdjacentHTML(&AfterEnd&, html);
function initSized(el) {
var h = 0;
el.children[0].style.display = &none&;
dropdown = el.children[1];
dropdown.style.visibility = &visible&;
if (dropdown.children.length & el.size) {
dropdown.style.overflow = &auto&;
for (var i=0; i&el. i++) {
h += dropdown.children[i].offsetH
if (dropdown.style.borderWidth != null) {
dropdown.style.pixelHeight = h + 4;
dropdown.style.height =
dropdown.style.border = sizedBorderC
el.style.height = dropdown.style.pixelH
function copySelected(el) {
var selectedIndex = findSelected(el);
selectedCell = el.children[0].rows[0].cells[0];
selectedDiv
el.children[1].children[selectedIndex];
selectedCell.innerHTML = selectedDiv.outerHTML;
function findSelected(el) {
var selected =
ec = el.children[1].
var ecl = ec.
for (var i=0; i& i++) {
if (ec[i].getAttribute(&selected&) != null) {
if (selected == null) {
selected =
ec[i].removeAttribute(&selected&);
if (selected == null)
selected = 0;
function toggleDropDown(el) {
if (el.size == 1) {
dropDown = el.children[1];
if (dropDown.style.visibility == &&)
dropDown.style.visibility = &hidden&;
if (dropDown.style.visibility == &hidden&)
showDropDown(dropDown);
hideDropDown(dropDown);
function optionClick() {
el = getReal(window.event.srcElement, &className&, &option&);
if (el.className == &option&) {
= el.parentE
selectBox = dropdown.parentE
oldSelected = dropdown.children[findSelected(selectBox)]
if(oldSelected != el) {
oldSelected.removeAttribute(&selected&);
el.setAttribute(&selected&, 1);
selectBox.selectedIndex = findSelected(selectBox);
if (selectBox.onchange != null) {
if (selectBox.id != &&) {
eval(selectBox.onchange.replace(/this/g, selectBox.id));
globalSelect = selectB
eval(selectBox.onchange.replace(/this/g, &globalSelect&));
if (el.backupCss != null)
el.style.cssText = el.backupC
copySelected(selectBox);
toggleDropDown(selectBox);
highlightSelected(selectBox, true);
function optionOver() {
var toEl = getReal(window.event.toElement, &className&, &option&);
var fromEl = getReal(window.event.fromElement, &className&, &option&);
if (toEl == fromEl)
var el = toEl;
if (el.className == &option&) {
if (el.backupCss == null)
el.backupCss = el.style.cssT
highlightSelected(el.parentElement.parentElement, false);
el.style.cssText = el.backupCss + &; & + overOptionC
this.highlighted =
function optionOut() {
var toEl = getReal(window.event.toElement, &className&, &option&);
var fromEl = getReal(window.event.fromElement, &className&, &option&);
if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {
if (toEl == null)
if (toEl.className != &option&)
if (toEl != null) {
if (toEl.className != &option&) {
if (fromEl.className == &option&)
highlightSelected(fromEl.parentElement.parentElement, true);
if (toEl == fromEl)
var el = fromEl;
if (el.className == &option&) {
if (el.backupCss != null)
el.style.cssText = el.backupC
function highlightSelected(el,add) {
var selectedIndex = findSelected(el);
selected = el.children[1].children[selectedIndex];
if (add) {
if (selected.backupCss == null)
selected.backupCss = selected.style.cssT
selected.style.cssText = selected.backupCss + &; & + overOptionC
else if (!add) {
if (selected.backupCss != null)
selected.style.cssText = selected.backupC
function hideShownDropDowns() {
var el = getReal(window.event.srcElement, &className&, &select&);
var spans = document.all.tags(&SPAN&);
var selects = new Array();
var index = 0;
for (var i=0; i&spans. i++) {
if ((spans[i].className == &select&) && (spans[i] != el)) {
ropdown = spans[i].children[1];
if ((spans[i].size == 1) && (dropdown.style.visibility == &visible&))
selects[index++] =
for (var j=0; j&selects. j++) {
hideDropDown(selects[j]);
function hideDropDown(el) {
if (typeof(fade) == &function&)
fade(el, false);
el.style.visibility = &hidden&;
function showDropDown(el) {
if (typeof(fade) == &function&)
fade(el, true);
else if (typeof(swipe) == &function&)
swipe(el, 2);
el.style.visibility = &visible&;
function initSelectBoxes() {
var spans = document.all.tags(&SPAN&);
var selects = new Array();
var index = 0;
for (var i=0; i&spans. i++) {
if (spans[i].className == &select&)
selects[index++] = spans[i];
for (var j=0; j&selects. j++) {
initSelectBox(selects[j]);
function getReal(el, type, value) {
while ((temp != null) && (temp.tagName != &BODY&)) {
if (eval(&temp.& + type) == value) {
temp = temp.parentE
if (ie4) {
window.onload = initSelectB
document.onclick = hideShownDropD
function writeSelectBox(matrix, id, size, onchange, css) {
var d = window.
var ie4 = (document.all != null);
if (ie4) {
//alert(&Before!&);
var s = createIEString(matrix, id, size, onchange, css);
document.write(s);
//alert(&After!&);
document.write(createXString(matrix, id, size, onchange, css));}
function createIEString(matrix, id, size, onchange, css) {
var str = &&;
str += '&span class=&select&';
if (size == null)
str += ' size=&' + size + '&';
if (id != null)
str += ' id=&' + id + '&';
if (onchange != null)
str += ' onchange=&' + onchange + '&';
if (css != null)
str += ' style=&' + css + '&';
str += '&\n';
str += '&table class=&selectTable& cellspacing=&0& cellpadding=&0&\n';
str += ' onclick=&toggleDropDown(this.parentElement)&&\n';
str += '&tr&\n';
str += '&td class=&selected&& &/td&\n';
str += '&td align=&CENTER& valign=&MIDDLE& class=&Button&\n';
str += ' onmousedown=&this.style.border=\'2 inset buttonhighlight\'&\n';
str += ' onmouseup=&this.style.border=\'2 outset buttonhighlight\'&&\n';
str += '&span style=&position: left: 0; top: -2; width: 100%;&&6&/span&&/td&\n';
str += '&/tr&\n';
str += '&/table&\n';
str += '&div class=&dropDown& onclick=&optionClick()& onmouseover=&optionOver()& onmouseout=&optionOut()&&\n';
for (var i=0; i&matrix. i++) {
= matrix[i].
= matrix[i].
= matrix[i].
selected = matrix[i].
str += '&div class=&option&';
if (value != null)
str += ' value=&' + value + '&';
if (css != null)
str += ' style=&' + css + '&';
if (selected != null)
str += ' selected';
str += '&\n';
str += '&/div&\n';
str += '&/div&\n';
str += '&/span&\n';
function createXString(matrix, id, size, onchange, css) {
var str = '&form&\n';
str += '&select';
if (size == null)
str += ' size=&' + size + '&';
if (id != null)
str += ' id=&' + id + '&';
if (onchange != null)
str += ' onchange=&' + onchange + '&';
str += '&\n';
for (var i=0; i&matrix. i++) {
= matrix[i].
= matrix[i].
= matrix[i].
selected = matrix[i].
str += '\n&option';
if (value != null)
str += ' value=&' + value + '&';
if (selected != null)
str += ' selected';
str += '&';
str += stripTags(html);
str += '&/option&\n';
str += '\n&/select&\n';
str += '&/form&\n';
function stripTags(str) {
var s = 0;
var e = -1;
var r = &&;
s = str.indexOf(&&&,e);
r += str.substring(e + 1,s);
e = str.indexOf(&&&,s);
s = str.indexOf(&&&,e);
while ((s != -1) && (e != -1))
r += str.substring(e + 1,str.length);
function Option(html, value, css, selected) {
this.html =
this.value =
this.css =
this.selected =
&script type=&text/javascript&&
var optionArray = new Array();
optionArray[0] = new Option(&Item 1&, &value 1&, &color: text-decoration:&);
optionArray[1] = new Option(&Item &b&2&/b&&, &value 2&);
optionArray[2] = new Option(&Item 3&, &value 3&, &color:&, &selected&);
optionArray[3] = new Option(&Item 4&, &value 4&);
optionArray[4] = new Option(&Item 5&, &value 5&);
writeSelectBox(optionArray, &select1&, 1, &alert(this.options[this.selectedIndex].value)&, &margin-left: 10;&);
&script type=&text/javascript&&
writeSelectBox(optionArray, &select3&, 3, &alert(this.options[this.selectedIndex].value)&, &margin-left: 10;&);
&提示：您可以先修改部分代码再运行
UID117525在线时间 小时积分12069帖子离线17198 天注册时间
总结：相应的位置处挡一个&div&。
UID113524在线时间 小时积分38525帖子离线17198 天注册时间
誓将（模拟）select进行到底：
&div id=&jnkc&&
&script&setInterval(&jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());&,1000);
&HEAD&&title&漂亮的下拉框&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
// 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.ImgPrefix = '/images';
SS_ENV.DefaultHeight = 20;
SS_ENV.ButtonWidth = 13;
SS_ENV.OptionsDivStyle = ''
+ ' display:'
+ ' z-index:10;'
+ ' position:'
+ ' border:1 solid '+ SS_ENV.CR.Border+';'
+ ' background-color:'
+ ' scrollbar-face-color:#D4D0C8;'
+ ' scrollbar-shadow-color:'
+ ' 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:12'
+ ' font-family:奔覆;';
// SaySelect Variables
var SS_VAR = new Object();
SS_VAR.DivDummy = document.createElement(&DIV&);
SS_VAR.SelectList = new Array();
SS_VAR.bEventAttached =
var SS_CreatedElements = new Object();
function unloadObjects()
if (SS_VAR && SS_VAR.SelectList)
for (key in SS_VAR.SelectList)
if (SS_VAR.SelectList[key])
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.
this.bOriginalSelect = (bAutoDetect && SS_ENV.IE_Version & 5.5);
this.select = SS_createElement(srcHTML);
this.selectedIndex = this.select.selectedI
this.options = this.select.
this.width = parseInt(this.select.style.width);
this.height = (this.select.style.height) ? parseInt(this.select.style.height) : SS_ENV.DefaultH
this.OptionHeight = this.height - 4;
this.bListDown = (ListMax && '-'==ListMax.toString().substr(0, 1)) ? false :
this.ListMax = (!isNaN(parseInt(ListMax))) ? Math.abs(ListMax) : 100;
this.TitleD
this.TitleT
this.TitleW
this.OptionsD
this.OptionsW
this.OptionsT
this.bFocused =
this.bExpanded =
this.bReverse =
// private method
this.isThisEventToBeCanceled = SS_isThisEventToBeC
this.toggleTitle = SS_toggleT
this.syncSelectedIndex = SS_syncSelectedI
this.toggleOptions = SS_toggleO
this.turnOnOption = SS_turnOnO
this.turnOffOption = SS_turnOffO
this.handleMousewheel = SS_handleM
this.handleOverTitle = SS_handleOverT
this.handleOutTitle = SS_handleOutT
this.handleOverOption = SS_handleOverO
this.createTable = SS_createT
this.createTitleDiv = SS_createTitleD
this.createOptionsDiv = SS_createOptionsD
this.createOptionTr = SS_createOptionTr;
this.adjustOptionsDiv = SS_adjustOptionsD
this.syncOptions = SS_syncO
this.pressOption = SS_pressO
this.moveOption = SS_moveO
this.releaseOption = SS_releaseO
this.pressTitle = SS_pressT
this.releaseTitle = SS_releaseT
// public method
this.display = SS_
this.insertOption = SS_insertO
this.deleteOption = SS_deleteO
this.changeOption = SS_changeO
// initiate
this.createTable();
this.select.setAttribute('SS', this);
if (!this.bOriginalSelect)
this.select.onpropertychange = SS_handleP
SS_VAR.SelectList[this.ssID] =
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)
var oSS = new SS_create(srcHTML, ListMax, bAutoDetect);
oSS.display();
return oSS;
function SS_insertOption (value, innerText, idx)
var NewOption = document.createElement(&OPTION&);
SS_CreatedElements[SS_CreatedElements.length] = NewO
this.options.add(NewOption, idx);
NewOption.innerText = innerT
NewOption.value =
if (!this.bOriginalSelect)
this.createOptionTr(idx);
this.syncOptions();
this.adjustOptionsDiv();
this.syncSelectedIndex();
function SS_deleteOption (idx)
this.options.remove(idx);
if (!this.bOriginalSelect)
this.OptionsTable.deleteRow(idx);
this.syncOptions();
this.adjustOptionsDiv();
this.syncSelectedIndex();
function SS_changeOption (idx, value, innerText)
this.options[idx].value =
this.options[idx].innerText = innerT
this.syncOptions();
this.syncSelectedIndex();
function SS_cancelEvent (event)
event.cancelBubble =
event.returnValue =
function SS_isThisEventToBeCanceled (event)
if ('object' == typeof(event)) {
switch (event.type) {
case 'mousedown':
if (!(event.button & 1))
case 'mouseup':
if (!(event.button & 1))
if (SS_ENV.IE_Version &= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) {
this.srcElementOfLastMousedown =
case 'mouseout':
if (!(SS_ENV.IE_Version & 5.5 && event.srcElement == this.srcElementOfLastMousedown))
case 'mousemove':
if (SS_ENV.IE_Version &= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null)
function SS_createElement (html)
SS_VAR.DivDummy.insertAdjacentHTML('afterBegin', html);
var oEl = SS_VAR.DivDummy.children(0);
while (SS_VAR.DivDummy.children.length & 0) {
SS_VAR.DivDummy.removeChild(SS_VAR.DivDummy.children(0));
return oEl;
function SS_blurExcept (except)
SS_cancelEvent(window.event);
except = ('number'==typeof(except)) ? except : -1;
var bHasToDetachEvent =
for (var i=0; i & SS_VAR.SelectList. i++) {
if (-1==except && SS_VAR.SelectList[i].bFocused && SS_VAR.SelectList[i].bExpanded) {
SS_VAR.SelectList[i].toggleOptions(false, true);
SS_VAR.SelectList[i].toggleTitle(true);
bHasToDetachEvent =
else if (i!=except) {
if (SS_VAR.SelectList[i].bExpanded)
SS_VAR.SelectList[i].toggleOptions(false, true);
if (SS_VAR.SelectList[i].bReverse)
SS_VAR.SelectList[i].toggleTitle(false);
SS_VAR.SelectList[i].bFocused =
if (SS_VAR.bEventAttached && bHasToDetachEvent) {
document.detachEvent('onmousedown', SS_blurExcept);
document.detachEvent('ondblclick', SS_blurExcept);
SS_VAR.bEventAttached =
function SS_syncSelectedIndex ()
this.selectedIndex = this.select.selectedI
if (this.bOriginalSelect)
if (this.TitleTable.cells(0).childNodes(0).innerText != this.options[this.selectedIndex].innerText)
this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerT
if (this.bExpanded)
this.toggleOptions(false);
function SS_toggleTitle (bReverse)
this.bReverse = ('undefined'!=typeof(bReverse)) ? bReverse: (!this.bReverse);
this.TitleTable.cells(0).style.backgroundColor = this.bReverse ? SS_ENV.CR.ReverseBackground : '';
this.TitleTable.cells(0).style.color = this.bReverse ? SS_ENV.CR.ReverseText : '';
function SS_toggleOptions (bExpanded, bStrict)
if (!bStrict && !this.bFocused) {
SS_blurExcept(this.ssID);
this.bExpanded = ('undefined'!=typeof(bExpanded)) ? bExpanded: (!this.bExpanded);
if (this.bExpanded) {
this.adjustOptionsDiv();
this.OptionsDiv.style.display = 'block';
if (!bStrict) {
this.toggleTitle(false);
this.handleOverOption(this.selectedIndex);
this.handleOutTitle();
this.OptionsDiv.style.display = 'none';
if (!bStrict) {
this.toggleTitle(true);
if (!bStrict) {
this.bFocused =
if (!SS_VAR.bEventAttached) {
document.attachEvent('onmousedown', SS_blurExcept);
document.attachEvent('ondblclick', SS_blurExcept);
SS_VAR.bEventAttached =
function SS_handlePropertychange ()
if ('propertychange'==window.event.type && 'selectedIndex'==window.event.propertyName) {
var oSS = window.event.srcElement.SS;
oSS.syncSelectedIndex();
if (null != oSS.select.onchange)
oSS.select.onchange();
function SS_handleMousewheel (event)
var idx = this.selectedI
if ('mousewheel'==event.type && this.bFocused && this.bReverse) {
for (var i=0; i & event.wheelD i += 120)
for (var i=0; i & event.wheelD i -= 120)
idx = Math.max(idx, 0);
idx = Math.min(idx, this.options.length - 1);
this.select.selectedIndex =
function SS_handleOverTitle ()
if (this.bExpanded)
this.TitleTable.style.borderColor = SS_ENV.CR.BorderA
this.TitleTable.cells(1).style.display = 'none';
this.TitleTable.cells(2).style.display = 'block';
function SS_handleOutTitle ()
this.TitleTable.style.borderColor = SS_ENV.CR.B
this.TitleTable.cells(2).style.display = 'none';
this.TitleTable.cells(1).style.display = 'block';
function SS_handleOverOption (idx)
for (var i=0; i & this.options. i++) {
if (i==idx)
this.turnOnOption(i);
this.turnOffOption(i);
function SS_turnOnOption (idx)
this.OptionsTable.cells(idx).style.color = SS_ENV.CR.ReverseT
this.OptionsTable.cells(idx).style.backgroundColor = SS_ENV.CR.ReverseB
function SS_turnOffOption (idx)
this.OptionsTable.cells(idx).style.color = '';
this.OptionsTable.cells(idx).style.backgroundColor = '';
function SS_adjustOptionsDiv ()
if (this.bOriginalSelect)
this.OptionsDiv.style.width = this.
this.OptionsDiv.style.height = Math.min(this.options.length, this.ListMax) * this.OptionHeight + 2;
this.OptionsWrapper.style.height = this.options.length * this.OptionH
this.OptionsDiv.style.overflowY = (this.options.length & this.ListMax) ? 'scroll' : '';
var top = this.Table.offsetT
var left = this.Table.offsetL
for (var El = this.Table.offsetP 'BODY'!=El.tagName && 'absolute'!=El.style.position && 'relative'!=El.style. El = El.offsetParent) {
if ('TABLE' != El.tagName) {
top += El.clientT
left += El.clientL
top += El.offsetT
left += El.offsetL
this.OptionsDiv.style.top = (this.bListDown) ? (top + this.height) : (top - parseInt(this.OptionsDiv.style.height));
this.OptionsDiv.style.left =
this.TitleWrapper.style.top = 0;
this.TitleWrapper.style.left = 0;
function SS_syncOptions ()
if (this.bOriginalSelect)
for (var i=0; i & this.options. i++) {
this.OptionsTable.cells(i).setAttribute('index', i);
if (this.OptionsTable.cells(i).childNodes(0).innerText != this.options[i].innerText)
this.OptionsTable.cells(i).childNodes(0).innerText = this.options[i].innerT
function SS_pressTitle (event)
SS_cancelEvent(event);
this.srcElementOfLastMousedown = event.srcE
this.toggleOptions();
function SS_releaseTitle (event)
SS_cancelEvent(event);
if (this.isThisEventToBeCanceled(event))
this.srcElementOfLastMousedown =
function SS_pressOption (event)
SS_cancelEvent(event);
this.srcElementOfLastMousedown = event.srcE
function SS_moveOption (event)
SS_cancelEvent(event);
if (this.isThisEventToBeCanceled(event))
if (!(event.offsetX &= 0 && event.offsetX &= this.OptionsTable.offsetWidth))
this.handleOverOption(Math.floor(event.offsetY / this.OptionHeight));
function SS_releaseOption (event)
SS_cancelEvent(event);
if (this.isThisEventToBeCanceled(event))
this.srcElementOfLastMousedown =
if (event.offsetX &= 0 && event.offsetX &= this.OptionsTable.offsetWidth) {
this.toggleOptions(false);
this.select.selectedIndex = Math.floor(event.offsetY / this.OptionHeight);
function SS_createTable ()
this.Table = SS_createElement(&&
+ &&table border=0 cellpadding=0 cellspacing=0 style='table-layout: cursor:default'&&
+ &&tr&&td&&/td&&/tr&&
+ &&/table&&
if (!isNaN(this.width))
this.Table.style.width = this.
this.Table.style.height = this.
if (!this.bOriginalSelect) {
this.createTitleDiv();
this.createOptionsDiv();
this.Table.cells(0).appendChild(this.TitleDiv);
this.Table.cells(0).appendChild(this.OptionsDiv);
this.Table.cells(0).appendChild(this.select);
function SS_createTitleDiv ()
this.TitleDiv = SS_createElement(&&
+ &&div style='position: top:0; left:0;'&&
+ & &table border=0 cellpadding=0 cellspacing=1&
height=&+this.height
bgcolor=white&
style='table-layout: border:1 solid &+SS_ENV.CR.Border+&;'&
onmouseover='SS_VAR.SelectList[&+this.ssID+&].adjustOptionsDiv()'&
&td&&nobr style='text-oveflow:&+SS_ENV.OptionNobrStyle+&'&&/nobr&&/td&&
&td width=&+SS_ENV.ButtonWidth+& align=center style='word-wrap:normal'&&/td&&
&td style='display:none' width=&+SS_ENV.ButtonWidth+& align=center style='word-wrap:normal'&&/td&&
&td style='display:none'&&/td&&
+ & &/tr&&
+ & &/table&&
+ &&/div&&
this.TitleTable = this.TitleDiv.childNodes(0);
this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerT
this.TitleTable.cells(1).innerHTML = &&img src='&+SS_ENV.ImgPrefix+&/btn_down.gif' border=0 align=absmiddle&&;
this.TitleTable.cells(2).innerHTML = &&img src='&+SS_ENV.ImgPrefix+&/btn_down_s.gif' border=0 align=absmiddle&&;
this.TitleTable.cells(3).appendChild(this.select);
this.TitleWrapper = document.createElement(&&
+ &&img src='&+SS_ENV.ImgPrefix+&/img_blank.gif'&
+ & style='position: top:0; left:0; z-index:2; width:100%; height:&+this.height+&;'&
+ & onmouseover='SS_VAR.SelectList[&+this.ssID+&].handleOverTitle()'&
+ & onmouseout='SS_VAR.SelectList[&+this.ssID+&].handleOutTitle(); SS_VAR.SelectList[&+this.ssID+&].releaseTitle(window.event);'&
+ & onmousedown='SS_VAR.SelectList[&+this.ssID+&].pressTitle(window.event)'&
+ & ondblclick='SS_VAR.SelectList[&+this.ssID+&].pressTitle(window.event); SS_VAR.SelectList[&+this.ssID+&].releaseTitle(window.event);'&
+ & onmouseup='SS_VAR.SelectList[&+this.ssID+&].releaseTitle(window.event)'&
+ & onmousewheel='SS_VAR.SelectList[&+this.ssID+&].handleMousewheel(window.event)'&
+ & ondragstart='SS_cancelEvent(window.event)'&
SS_CreatedElements[SS_CreatedElements.length] = this.TitleW
this.TitleDiv.appendChild(this.TitleWrapper);
function SS_createOptionsDiv ()
this.OptionsDiv = SS_createElement(&&
+ &&div style='&+SS_ENV.OptionsDivStyle+&'&
+ & onscroll='SS_VAR.SelectList[&+this.ssID+&].moveOption(window.event)'&
+ & onmousedown='SS_cancelEvent(window.event)'&
+ & &table border=0 cellpadding=0 cellspacing=0 width=100% style='table-layout:fixed'&&
+ & &/table&&
+ &&/div&&
this.OptionsTable = this.OptionsDiv.childNodes(0);
for (var i=0; i & this.options. i++) {
this.createOptionTr(i);
this.syncOptions();
this.OptionsWrapper = document.createElement(&&
+ &&img src='&+SS_ENV.ImgPrefix+&/img_blank.gif'&
+ & style='position: top:0; left:0; width:100%;'&
+ & onmousedown='SS_VAR.SelectList[&+this.ssID+&].pressOption(window.event)'&
+ & onmousemove='SS_VAR.SelectList[&+this.ssID+&].moveOption(window.event)'&
+ & onmouseup='SS_VAR.SelectList[&+this.ssID+&].releaseOption(window.event)'&
+ & onmouseout='SS_VAR.SelectList[&+this.ssID+&].releaseOption(window.event)'&
+ & ondragstart='SS_cancelEvent(window.event)'&
SS_CreatedElements[SS_CreatedElements.length] = this.OptionsW
this.OptionsDiv.appendChild(this.OptionsWrapper);
function SS_createOptionTr (idx)
idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1;
var OptionTr = this.OptionsTable.insertRow(-1);
var OptionTd = document.createElement(&&td height=&+this.OptionHeight+&&&/td&&);
SS_CreatedElements[SS_CreatedElements.length] = this.OptionsTd;
OptionTd.appendChild(document.createElement(&&nobr style='&+SS_ENV.OptionNobrStyle+&'&&/nobr&&));
OptionTr.appendChild(OptionTd);
&body&&script&SS_write(&&select style='width:60;height:18font-size:12px' name=star&\n&
+& &option value=\&\& selected&不限&/option&\n&
+&&option value=\&水瓶座\&&水瓶座&/option&&
+&&option value=\&双鱼座\&&双鱼座&/option&&
+&&option value=\&白羊座\&&白羊座&/option&&
+&&option value=\&金牛座\&&金牛座&/option&&
+&&option value=\&双子座\&&双子座&/option&&
+&&option value=\&巨蟹座\&&巨蟹座&/option&&
+&&option value=\&狮子座\&&狮子座&/option&&
+&&option value=\&处女座\&&处女座&/option&&
+&&option value=\&天秤座\&&天秤座&/option&&
+&&option value=\&天蝎座\&&天蝎座&/option&&
+&&option value=\&射手座\&&射手座&/option&&
+&&option value=\&摩羯座\&&摩羯座&/option&&
+&&/select&\n&);
&/script&&br&
&script&SS_write(&&select name='province' style='width:60;height:18font-size:12px'&\n&
+&&option value=\&\& selected&都行&/option&\n&
+&&option value=\&北京\&&北京&/option&&
+&&option value=\&上海\&&上海&/option&&
+&&option value=\&天津\&&天津&/option&&
+&&option value=\&重庆\&&重庆&/option&&
+&&option value=\&安徽\&&安徽&/option&&
+&&option value=\&福建\&&福建&/option&&
+&&option value=\&甘肃\&&甘肃&/option&&
+&&option value=\&广东\&&广东&/option&&
+&&option value=\&广西\&&广西&/option&&
+&&option value=\&贵州\&&贵州&/option&&
+&&option value=\&海南\&&海南&/option&&
+&&option value=\&河北\&&河北&/option&&
+&&option value=\&黑龙江\&&黑龙江&/option&&
+&&option value=\&河南\&&河南&/option&&
+&&option value=\&湖北\&&湖北&/option&&
+&&option value=\&湖南\&&湖南&/option&&
+&&option value=\&内蒙古\&&内蒙古&/option&&
+&&option value=\&江苏\&&江苏&/option&&
+&&option value=\&江西\&&江西&/option&&
+&&option value=\&吉林\&&吉林&/option&&
+&&option value=\&辽宁\&&辽宁&/option&&
+&&option value=\&宁夏\&&宁夏&/option&&
+&&option value=\&青海\&&青海&/option&&
+&&option value=\&山西\&&山西&/option&&
+&&option value=\&陕西\&&陕西&/option&&
+&&option value=\&山东\&&山东&/option&&
+&&option value=\&四川\&&四川&/option&&
+&&option value=\&江西\&&江西&/option&&
+&&option value=\&西藏\&&西藏&/option&&
+&&option value=\&新疆\&&新疆&/option&&
+&&option value=\&云南\&&云南&/option&&
+&&option value=\&浙江\&&浙江&/option&&
+&&option value=\&其它\&&其它&/option&&
+&&/select&\n&,8); &/script&&br&
body ,table{font:24px 华文行楷; color: filter:progid:DXImageTransform.microsoft.gradient(startColorStr=#ffff0000,endColorStr=#ff000000)}
&input style=&color: background:;&&
&table width=&61%& height=&173& border=&0& cellpadding=&0& cellspacing=&0& style=&FILTER:alpha(opacity=50)&&
&td bgcolor=&#FFFFFF&&&span style=&position:relative&&&p& 最是那一低头的温柔&br&
像一朵水莲花不胜凉风的娇羞&br&
道一声珍重&br&
道一声珍重&br&
那一声珍重里有蜜甜的忧愁&br&
沙扬娜拉&br&
&/p&&/span&&/td&
&/tr&&/table&
&br&&br&&br&
&a href=&& onfocus=&if(this.blur)this.blur();&&&img src=&/bbs/face/64.gif& border=&0&&&/a&
&br&&br&&br&
&div style=&overflow: position: border:1
width:108; height:20&&
&div style=&overflow: position: width:54; height:20&&
&select name=&select1& style=&position: top:-2; left:-2& onChange='javascript:window.open(this.options[this.selectedIndex].value)'&
&option style=&background-color:red& value=&h99.html&&Love&/option&
&option style=&background-color:pink& value=&h55.html&&You&/option&
&option style=&background-color:yellow& value=&m111.html&&Forever&/option&
&option style=&background-color:cyan& value=&b99.html&&Amazing&/option&
&option style=&background-color:lime& value=&m99.html&&Internet&/option&
&div style=&position: top:0; right:0; width:27; height:18;
background:#11 border:1 solid #ed0911; font:12 padding:2;
cursor: overflow:hidden& onclick=&select1.selectedIndex++&
onselectstart=&return false&&6&/div&
&br&&br&&br&
&提示：您可以先修改部分代码再运行
UID199566在线时间 小时积分17帖子离线17198 天注册时间
新手上路, 积分 17, 距离下一级还需 33 积分
marvellous大虾：
可以再发一下代码吗？谢谢，只要运行后出现的页面中的每个下拉框的代码，也就是时间显示下面的那个，谢谢啊！
UID199566在线时间 小时积分17帖子离线17198 天注册时间
新手上路, 积分 17, 距离下一级还需 33 积分
不好意思，打错字了，是页面中的第一个下拉框的代码，也就是时间显示下面的那个，谢谢啊！盼回复！
UID113524在线时间 小时积分38525帖子离线17198 天注册时间
&HEAD&&title&漂亮的下拉框&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
body ,table{font:24px 华文行楷; color: filter:progid:DXImageTransform.microsoft.gradient(startColorStr=#ffff0000,endColorStr=#ff000000)}
// 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.ImgPrefix = '/images';
SS_ENV.DefaultHeight = 20;
SS_ENV.ButtonWidth = 13;
SS_ENV.OptionsDivStyle = ''
+ ' display:'
+ ' z-index:10;'
+ ' position:'
+ ' border:1 solid '+ SS_ENV.CR.Border+';'
+ ' background-color:'
+ ' scrollbar-face-color:#D4D0C8;'
+ ' scrollbar-shadow-color:'
+ ' 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:12'
+ ' font-family:奔覆;';
// SaySelect Variables
var SS_VAR = new Object();
SS_VAR.DivDummy = document.createElement(&DIV&);
SS_VAR.SelectList = new Array();
SS_VAR.bEventAttached =
var SS_CreatedElements = new Object();
function unloadObjects()
if (SS_VAR && SS_VAR.SelectList)
for (key in SS_VAR.SelectList)
if (SS_VAR.SelectList[key])
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.
this.bOriginalSelect = (bAutoDetect && SS_ENV.IE_Version & 5.5);
this.select = SS_createElement(srcHTML);
this.selectedIndex = this.select.selectedI
this.options = this.select.
this.width = parseInt(this.select.style.width);
this.height = (this.select.style.height) ? parseInt(this.select.style.height) : SS_ENV.DefaultH
this.OptionHeight = this.height - 4;
this.bListDown = (ListMax && '-'==ListMax.toString().substr(0, 1)) ? false :
this.ListMax = (!isNaN(parseInt(ListMax))) ? Math.abs(ListMax) : 100;
this.TitleD
this.TitleT
this.TitleW
this.OptionsD
this.OptionsW
this.OptionsT
this.bFocused =
this.bExpanded =
this.bReverse =
// private method
this.isThisEventToBeCanceled = SS_isThisEventToBeC
this.toggleTitle = SS_toggleT
this.syncSelectedIndex = SS_syncSelectedI
this.toggleOptions = SS_toggleO
this.turnOnOption = SS_turnOnO
this.turnOffOption = SS_turnOffO
this.handleMousewheel = SS_handleM
this.handleOverTitle = SS_handleOverT
this.handleOutTitle = SS_handleOutT
this.handleOverOption = SS_handleOverO
this.createTable = SS_createT
this.createTitleDiv = SS_createTitleD
this.createOptionsDiv = SS_createOptionsD
this.createOptionTr = SS_createOptionTr;
this.adjustOptionsDiv = SS_adjustOptionsD
this.syncOptions = SS_syncO
this.pressOption = SS_pressO
this.moveOption = SS_moveO
this.releaseOption = SS_releaseO
this.pressTitle = SS_pressT
this.releaseTitle = SS_releaseT
// public method
this.display = SS_
this.insertOption = SS_insertO
this.deleteOption = SS_deleteO
this.changeOption = SS_changeO
// initiate
this.createTable();
this.select.setAttribute('SS', this);
if (!this.bOriginalSelect)
this.select.onpropertychange = SS_handleP
SS_VAR.SelectList[this.ssID] =
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)
var oSS = new SS_create(srcHTML, ListMax, bAutoDetect);
oSS.display();
return oSS;
function SS_insertOption (value, innerText, idx)
var NewOption = document.createElement(&OPTION&);
SS_CreatedElements[SS_CreatedElements.length] = NewO
this.options.add(NewOption, idx);
NewOption.innerText = innerT
NewOption.value =
if (!this.bOriginalSelect)
this.createOptionTr(idx);
this.syncOptions();
this.adjustOptionsDiv();
this.syncSelectedIndex();
function SS_deleteOption (idx)
this.options.remove(idx);
if (!this.bOriginalSelect)
this.OptionsTable.deleteRow(idx);
this.syncOptions();
this.adjustOptionsDiv();
this.syncSelectedIndex();
function SS_changeOption (idx, value, innerText)
this.options[idx].value =
this.options[idx].innerText = innerT
this.syncOptions();
this.syncSelectedIndex();
function SS_cancelEvent (event)
event.cancelBubble =
event.returnValue =
function SS_isThisEventToBeCanceled (event)
if ('object' == typeof(event)) {
switch (event.type) {
case 'mousedown':
if (!(event.button & 1))
case 'mouseup':
if (!(event.button & 1))
if (SS_ENV.IE_Version &= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) {
this.srcElementOfLastMousedown =
case 'mouseout':
if (!(SS_ENV.IE_Version & 5.5 && event.srcElement == this.srcElementOfLastMousedown))
case 'mousemove':
if (SS_ENV.IE_Version &= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null)
function SS_createElement (html)
SS_VAR.DivDummy.insertAdjacentHTML('afterBegin', html);
var oEl = SS_VAR.DivDummy.children(0);
while (SS_VAR.DivDummy.children.length & 0) {
SS_VAR.DivDummy.removeChild(SS_VAR.DivDummy.children(0));
return oEl;
function SS_blurExcept (except)
SS_cancelEvent(window.event);
except = ('number'==typeof(except)) ? except : -1;
var bHasToDetachEvent =
for (var i=0; i & SS_VAR.SelectList. i++) {
if (-1==except && SS_VAR.SelectList[i].bFocused && SS_VAR.SelectList[i].bExpanded) {
SS_VAR.SelectList[i].toggleOptions(false, true);
SS_VAR.SelectList[i].toggleTitle(true);
bHasToDetachEvent =
else if (i!=except) {
if (SS_VAR.SelectList[i].bExpanded)
SS_VAR.SelectList[i].toggleOptions(false, true);
if (SS_VAR.SelectList[i].bReverse)
SS_VAR.SelectList[i].toggleTitle(false);
SS_VAR.SelectList[i].bFocused =
if (SS_VAR.bEventAttached && bHasToDetachEvent) {
document.detachEvent('onmousedown', SS_blurExcept);
document.detachEvent('ondblclick', SS_blurExcept);
SS_VAR.bEventAttached =
function SS_syncSelectedIndex ()
this.selectedIndex = this.select.selectedI
if (this.bOriginalSelect)
if (this.TitleTable.cells(0).childNodes(0).innerText != this.options[this.selectedIndex].innerText)
this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerT
if (this.bExpanded)
this.toggleOptions(false);
function SS_toggleTitle (bReverse)
this.bReverse = ('undefined'!=typeof(bReverse)) ? bReverse: (!this.bReverse);
this.TitleTable.cells(0).style.backgroundColor = this.bReverse ? SS_ENV.CR.ReverseBackground : '';
this.TitleTable.cells(0).style.color = this.bReverse ? SS_ENV.CR.ReverseText : '';
function SS_toggleOptions (bExpanded, bStrict)
if (!bStrict && !this.bFocused) {
SS_blurExcept(this.ssID);
this.bExpanded = ('undefined'!=typeof(bExpanded)) ? bExpanded: (!this.bExpanded);
if (this.bExpanded) {
this.adjustOptionsDiv();
this.OptionsDiv.style.display = 'block';
if (!bStrict) {
this.toggleTitle(false);
this.handleOverOption(this.selectedIndex);
this.handleOutTitle();
this.OptionsDiv.style.display = 'none';
if (!bStrict) {
this.toggleTitle(true);
if (!bStrict) {
this.bFocused =
if (!SS_VAR.bEventAttached) {
document.attachEvent('onmousedown', SS_blurExcept);
document.attachEvent('ondblclick', SS_blurExcept);
SS_VAR.bEventAttached =
function SS_handlePropertychange ()
if ('propertychange'==window.event.type && 'selectedIndex'==window.event.propertyName) {
var oSS = window.event.srcElement.SS;
oSS.syncSelectedIndex();
if (null != oSS.select.onchange)
oSS.select.onchange();
function SS_handleMousewheel (event)
var idx = this.selectedI
if ('mousewheel'==event.type && this.bFocused && this.bReverse) {
for (var i=0; i & event.wheelD i += 120)
for (var i=0; i & event.wheelD i -= 120)
idx = Math.max(idx, 0);
idx = Math.min(idx, this.options.length - 1);
this.select.selectedIndex =
function SS_handleOverTitle ()
if (this.bExpanded)
this.TitleTable.style.borderColor = SS_ENV.CR.BorderA
this.TitleTable.cells(1).style.display = 'none';
this.TitleTable.cells(2).style.display = 'block';
function SS_handleOutTitle ()
this.TitleTable.style.borderColor = SS_ENV.CR.B
this.TitleTable.cells(2).style.display = 'none';
this.TitleTable.cells(1).style.display = 'block';
function SS_handleOverOption (idx)
for (var i=0; i & this.options. i++) {
if (i==idx)
this.turnOnOption(i);
this.turnOffOption(i);
function SS_turnOnOption (idx)
this.OptionsTable.cells(idx).style.color = SS_ENV.CR.ReverseT
this.OptionsTable.cells(idx).style.backgroundColor = SS_ENV.CR.ReverseB
function SS_turnOffOption (idx)
this.OptionsTable.cells(idx).style.color = '';
this.OptionsTable.cells(idx).style.backgroundColor = '';
function SS_adjustOptionsDiv ()
if (this.bOriginalSelect)
this.OptionsDiv.style.width = this.
this.OptionsDiv.style.height = Math.min(this.options.length, this.ListMax) * this.OptionHeight + 2;
this.OptionsWrapper.style.height = this.options.length * this.OptionH
this.OptionsDiv.style.overflowY = (this.options.length & this.ListMax) ? 'scroll' : '';
var top = this.Table.offsetT
var left = this.Table.offsetL
for (var El = this.Table.offsetP 'BODY'!=El.tagName && 'absolute'!=El.style.position && 'relative'!=El.style. El = El.offsetParent) {
if ('TABLE' != El.tagName) {
top += El.clientT
left += El.clientL
top += El.offsetT
left += El.offsetL
this.OptionsDiv.style.top = (this.bListDown) ? (top + this.height) : (top - parseInt(this.OptionsDiv.style.height));
this.OptionsDiv.style.left =
this.TitleWrapper.style.top = 0;
this.TitleWrapper.style.left = 0;
function SS_syncOptions ()
if (this.bOriginalSelect)
for (var i=0; i & this.options. i++) {
this.OptionsTable.cells(i).setAttribute('index', i);
if (this.OptionsTable.cells(i).childNodes(0).innerText != this.options[i].innerText)
this.OptionsTable.cells(i).childNodes(0).innerText = this.options[i].innerT
function SS_pressTitle (event)
SS_cancelEvent(event);
this.srcElementOfLastMousedown = event.srcE
this.toggleOptions();
function SS_releaseTitle (event)
SS_cancelEvent(event);
if (this.isThisEventToBeCanceled(event))
this.srcElementOfLastMousedown =
function SS_pressOption (event)
SS_cancelEvent(event);
this.srcElementOfLastMousedown = event.srcE
function SS_moveOption (event)
SS_cancelEvent(event);
if (this.isThisEventToBeCanceled(event))
if (!(event.offsetX &= 0 && event.offsetX &= this.OptionsTable.offsetWidth))
this.handleOverOption(Math.floor(event.offsetY / this.OptionHeight));
function SS_releaseOption (event)
SS_cancelEvent(event);
if (this.isThisEventToBeCanceled(event))
this.srcElementOfLastMousedown =
if (event.offsetX &= 0 && event.offsetX &= this.OptionsTable.offsetWidth) {
this.toggleOptions(false);
this.select.selectedIndex = Math.floor(event.offsetY / this.OptionHeight);
function SS_createTable ()
this.Table = SS_createElement(&&
+ &&table border=0 cellpadding=0 cellspacing=0 style='table-layout: cursor:default'&&
+ &&tr&&td&&/td&&/tr&&
+ &&/table&&
if (!isNaN(this.width))
this.Table.style.width = this.
this.Table.style.height = this.
if (!this.bOriginalSelect) {
this.createTitleDiv();
this.createOptionsDiv();
this.Table.cells(0).appendChild(this.TitleDiv);
this.Table.cells(0).appendChild(this.OptionsDiv);
this.Table.cells(0).appendChild(this.select);
function SS_createTitleDiv ()
this.TitleDiv = SS_createElement(&&
+ &&div style='position: top:0; left:0;'&&
+ & &table border=0 cellpadding=0 cellspacing=1&
height=&+this.height
bgcolor=white&
style='table-layout: border:1 solid &+SS_ENV.CR.Border+&;'&
onmouseover='SS_VAR.SelectList[&+this.ssID+&].adjustOptionsDiv()'&
&td&&nobr style='text-oveflow:&+SS_ENV.OptionNobrStyle+&'&&/nobr&&/td&&
&td width=&+SS_ENV.ButtonWidth+& align=center style='word-wrap:normal'&&/td&&
&td style='display:none' width=&+SS_ENV.ButtonWidth+& align=center style='word-wrap:normal'&&/td&&
&td style='display:none'&&/td&&
+ & &/tr&&
+ & &/table&&
+ &&/div&&
this.TitleTable = this.TitleDiv.childNodes(0);
this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerT
this.TitleTable.cells(1).innerHTML = &&img src='&+SS_ENV.ImgPrefix+&/btn_down.gif' border=0 align=absmiddle&&;
this.TitleTable.cells(2).innerHTML = &&img src='&+SS_ENV.ImgPrefix+&/btn_down_s.gif' border=0 align=absmiddle&&;
this.TitleTable.cells(3).appendChild(this.select);
this.TitleWrapper = document.createElement(&&
+ &&img src='&+SS_ENV.ImgPrefix+&/img_blank.gif'&
+ & style='position: top:0; left:0; z-index:2; width:100%; height:&+this.height+&;'&
+ & onmouseover='SS_VAR.SelectList[&+this.ssID+&].handleOverTitle()'&
+ & onmouseout='SS_VAR.SelectList[&+this.ssID+&].handleOutTitle(); SS_VAR.SelectList[&+this.ssID+&].releaseTitle(window.event);'&
+ & onmousedown='SS_VAR.SelectList[&+this.ssID+&].pressTitle(window.event)'&
+ & ondblclick='SS_VAR.SelectList[&+this.ssID+&].pressTitle(window.event); SS_VAR.SelectList[&+this.ssID+&].releaseTitle(window.event);'&
+ & onmouseup='SS_VAR.SelectList[&+this.ssID+&].releaseTitle(window.event)'&
+ & onmousewheel='SS_VAR.SelectList[&+this.ssID+&].handleMousewheel(window.event)'&
+ & ondragstart='SS_cancelEvent(window.event)'&
SS_CreatedElements[SS_CreatedElements.length] = this.TitleW
this.TitleDiv.appendChild(this.TitleWrapper);
function SS_createOptionsDiv ()
this.OptionsDiv = SS_createElement(&&
+ &&div style='&+SS_ENV.OptionsDivStyle+&'&
+ & onscroll='SS_VAR.SelectList[&+this.ssID+&].moveOption(window.event)'&
+ & onmousedown='SS_cancelEvent(window.event)'&
+ & &table border=0 cellpadding=0 cellspacing=0 width=100% style='table-layout:fixed'&&
+ & &/table&&
+ &&/div&&
this.OptionsTable = this.OptionsDiv.childNodes(0);
for (var i=0; i & this.options. i++) {
this.createOptionTr(i);
this.syncOptions();
this.OptionsWrapper = document.createElement(&&
+ &&img src='&+SS_ENV.ImgPrefix+&/img_blank.gif'&
+ & style='position: top:0; left:0; width:100%;'&
+ & onmousedown='SS_VAR.SelectList[&+this.ssID+&].pressOption(window.event)'&
+ & onmousemove='SS_VAR.SelectList[&+this.ssID+&].moveOption(window.event)'&
+ & onmouseup='SS_VAR.SelectList[&+this.ssID+&].releaseOption(window.event)'&
+ & onmouseout='SS_VAR.SelectList[&+this.ssID+&].releaseOption(window.event)'&
+ & ondragstart='SS_cancelEvent(window.event)'&
SS_CreatedElements[SS_CreatedElements.length] = this.OptionsW
this.OptionsDiv.appendChild(this.OptionsWrapper);
function SS_createOptionTr (idx)
idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1;
var OptionTr = this.OptionsTable.insertRow(-1);
var OptionTd = document.createElement(&&td height=&+this.OptionHeight+&&&/td&&);
SS_CreatedElements[SS_CreatedElements.length] = this.OptionsTd;
OptionTd.appendChild(document.createElement(&&nobr style='&+SS_ENV.OptionNobrStyle+&'&&/nobr&&));
OptionTr.appendChild(OptionTd);
&body&&script&SS_write(&&select style='width:60;height:18font-size:12px' name=star&\n&
+& &option value=\&\& selected&不限&/option&\n&
+&&option value=\&水瓶座\&&水瓶座&/option&&
+&&option value=\&双鱼座\&&双鱼座&/option&&
+&&option value=\&白羊座\&&白羊座&/option&&
+&&option value=\&金牛座\&&金牛座&/option&&
+&&option value=\&双子座\&&双子座&/option&&
+&&option value=\&巨蟹座\&&巨蟹座&/option&&
+&&option value=\&狮子座\&&狮子座&/option&&
+&&option value=\&处女座\&&处女座&/option&&
+&&option value=\&天秤座\&&天秤座&/option&&
+&&option value=\&天蝎座\&&天蝎座&/option&&
+&&option value=\&射手座\&&射手座&/option&&
+&&option value=\&摩羯座\&&摩羯座&/option&&
+&&/select&\n&);
&/script&&br&
&script&SS_write(&&select name='province' style='width:60;height:18font-size:12px'&\n&
+&&option value=\&\& selected&都行&/option&\n&
+&&option value=\&北京\&&北京&/option&&
+&&option value=\&上海\&&上海&/option&&
+&&option value=\&天津\&&天津&/option&&
+&&option value=\&重庆\&&重庆&/option&&
+&&option value=\&安徽\&&安徽&/option&&
+&&option value=\&福建\&&福建&/option&&
+&&option value=\&甘肃\&&甘肃&/option&&
+&&option value=\&广东\&&广东&/option&&
+&&option value=\&广西\&&广西&/option&&
+&&option value=\&贵州\&&贵州&/option&&
+&&option value=\&海南\&&海南&/option&&
+&&option value=\&河北\&&河北&/option&&
+&&option value=\&黑龙江\&&黑龙江&/option&&
+&&option value=\&河南\&&河南&/option&&
+&&option value=\&湖北\&&湖北&/option&&
+&&option value=\&湖南\&&湖南&/option&&
+&&option value=\&内蒙古\&&内蒙古&/option&&
+&&option value=\&江苏\&&江苏&/option&&
+&&option value=\&江西\&&江西&/option&&
+&&option value=\&吉林\&&吉林&/option&&
+&&option value=\&辽宁\&&辽宁&/option&&
+&&option value=\&宁夏\&&宁夏&/option&&
+&&option value=\&青海\&&青海&/option&&
+&&option value=\&山西\&&山西&/option&&
+&&option value=\&陕西\&&陕西&/option&&
+&&option value=\&山东\&&山东&/option&&
+&&option value=\&四川\&&四川&/option&&
+&&option value=\&江西\&&江西&/option&&
+&&option value=\&西藏\&&西藏&/option&&
+&&option value=\&新疆\&&新疆&/option&&
+&&option value=\&云南\&&云南&/option&&
+&&option value=\&浙江\&&浙江&/option&&
+&&option value=\&其它\&&其它&/option&&
+&&/select&\n&,8); &/script&&br&
&提示：您可以先修改部分代码再运行
UID193523在线时间 小时积分2577帖子离线17198 天注册时间
银牌会员, 积分 2577, 距离下一级还需 423 积分
争取支持滚轮.
UID191797在线时间 小时积分3215帖子离线17198 天注册时间
金牌会员, 积分 3215, 距离下一级还需 1785 积分
楼上高手们真是高，高！
UID199566在线时间 小时积分17帖子离线17198 天注册时间
新手上路, 积分 17, 距离下一级还需 33 积分
marvellous在上个帖子中说
大虾：只要这个
的代码，能不能短一点啊？还有不明白的就是本来不改的话在网站上的下拉框就是个标签，但现在是个脚本文件了，是这样的，我是想把我们网站上的搜索框的样式改一下，改成你教的这个的话就不是在后台自动添加产品了，我到底能不能用你的那个呢？狂谢啊！
&body&
&select name=&选择品牌&&&form name=&form1& method=&post& action=&&&
&&&input type=&checkbox& name=&checkbox& value=&checkbox&&
&/form&&/select&
&/body&复制代码
我在网上搜翻了唯一就看到你这我想要的效果，能不能开一帖这个自制下拉框的教程啊！？
UID97764在线时间 小时积分1045帖子离线17198 天注册时间
银牌会员, 积分 1045, 距离下一级还需 1955 积分
在option比较长的情况下，会出下滚动条。
有没有办法控制下拉列表中的&option&显示数量呢？
//我这边有的系统默认显示30条，但是有的默认显示11条。
UID224510在线时间 小时积分321帖子离线17198 天注册时间
中级会员, 积分 321, 距离下一级还需 179 积分
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&title&EditSelect&/title&
scHTML='&div id=&selectcontent& class=&selectdiv& style=&visibility:&&&iframe id=selframe frameborder=0 height=100%&&/iframe&&div id=&selecthtml& class=&selectcontent&&select&Aбí&/div&&/div&'
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml
function editselect(name,size,defaulttext,width,height,readonly){
var combo=
this.options=new Array();
this.name=
this.divname=name+'_div';
this.buttonname=name+'_button';
this.tablename=name+'_table';
this.htmltable=name+'_html'
if (!height) this.height=0; else this.height=height
if (width) this.width=width
if (!size) size=8
if (!defaulttext) defaulttext=&&
if (!readonly || readonly==0) {readonly=&& }else {if (readonly==1) readonly=&readonly style=cursor:default&;this.readonly=1}
esHTML='&div id='+this.divname+'&'
+'&table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select&&tr&&td bgcolor=#FFFFFF&'
+'&input type=text class=selecttext size=&'+size+'& name='+name+' value=&'+defaulttext+'& '+readonly+'&&td&&button class=selectbutton id='+this.buttonname+'&6&/td&&/tr&&/table&'
document.write(esHTML)
this.sbutton=eval(&document.all.&+this.buttonname)
if (this.readonly==1) eval(this.name).onclick=function(){combo.show()}
this.sbutton.onclick=function(){combo.show()}
this.show=function(){
pDiv=eval(combo.divname)
pTable=eval(combo.tablename)
var vHTML='&table id=htmltable cellspacing=&0& cellpadding=&2& bgcolor=&#ffffff& class=&selecttable& width=100%&'
for (i=0;i&combo.options.i++)
vHTML+='&tr onmouseover=&mo(this)& onmouseout=&mu(this)& onclick=&document.all.'+combo.name+'.value=this.innerTselectcontent.style.visibility=\'hidden\'&&&td nowrap&'+combo.options[i]
vHTML+=&&/table&&
vDivHtml.innerHTML=vHTML
vtop=pDiv.offsetTop+pDiv.offsetHeight
vleft=pDiv.offsetLeft+1
vParent = pDiv.offsetP
while (vParent.tagName.toUpperCase() != &BODY&)
vleft += vParent.offsetL
vtop += vParent.offsetT
vParent = vParent.offsetP
var redge=document.body.clientWidth-vleft
var bedge=document.body.clientHeight-vtop
if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
if (combo.height==0)
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
if (htmltable.offsetHeight&combo.height)
vDiv.style.pixelHeight=combo.height
vDivHtml.style.pixelHeight=combo.height
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.scrollTop=0
if (redge&vDiv.offsetWidth)
vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
vDiv.style.left=vleft-1
if (bedge&vDiv.offsetHeight)
//vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
vDiv.style.top=vtop-vDiv.offsetHeight+bedge
vDiv.style.top=vtop
vDivHtml.style.width=parseInt(vDiv.style.width)
vDiv.style.visibility=&visible&
this.add=function(text){
combo.options[combo.options.length]=text
this.about=function(){
function mo(obj){
obj.style.backgroundColor=&#000099&
obj.style.color=&#ffffff&
function mu(obj){
obj.style.backgroundColor=&&
obj.style.color=&#000000&
document.onmousedown=function(){
if (vDiv.style.visibility==&visible&){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollT
x1=vDiv.offsetLeft
y1=vDiv.offsetTop
x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight
if (mx&x1 || my&y1 || x2&mx || y2&my)
vDiv.style.visibility='hidden'
.selecttext{
border:0px
height: 16;
font-family:
font-size:12
.selectbutton{
font-family:
font-size:10
height: 19;
width: 16;
border:1px solid #83A5EB;
line-height:0
padding-bottom:3
background-color:#D1E0FD
.selecttable{
font-family:
font-size:12
.selectcontent
border:1px solid #000000
.selectdiv
width:100;
border-collapse:
border:1px solid #7F9DB9
&body bgcolor=&#83A5EB&&
&table border=&0& width=&100%&&
&td width=&151& align=&center&&&font size=&2&&可编辑的Select&/font&&/td&
&td&&script&
var sel1=new editselect(&select1&,&25&,&可编辑的Select&,&&);
sel1.add(&这是一个可以编辑的Select&)
sel1.add(&支持CSS&)
sel1.add(&可以通过CSS，修改外形&)
sel1.add(&突破原来的Select诸多限制&)
&/script&&/td&
&td width=&151& align=&center&&&font size=&2&&长度可以随意修改&br&可以设置为只读&/font&&/td&
var sel2=new editselect(&select2&,&20&,&长度可以随意修改&,250,82,1);
sel2.add(&这是一个可以编辑的Select&)
sel2.add(&支持CSS&)
sel2.add(&可以通过CSS，修改外形&)
sel2.add(&作者:舜子制作&)
sel2.add(&MSN:&)
&td width=&151& align=&center&&&font size=&2&&可以遮盖系统Select&/font&&/td&
var sel3=new editselect(&select3&,&25&,&可以遮盖系统Select&,&&,41);
sel3.add(&这是一个可以编辑的Select&)
sel3.add(&支持CSS&)
sel3.add(&可以通过CSS，修改外形&)
sel3.add(&突破原来的Select诸多限制&)
&td width=&151& align=&right&&　&/td&
&td&&select&&option&系统的Select&/option&&/select&　&/td&
&提示：您可以先修改部分代码再运行
Powered by