页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

一个漂亮的下拉列表，去掉了灰色倒三角按钮

发布：dxy 字体：[增加减小] 类型：转载

很漂亮，比较适合女性一类比较温馨的网站

点击运行可以看到效果:

<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.ImgPrefix = 'http://www.viafriend.com/images';  
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();

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)  
{  
 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] = NewOption;  
 this.options.add(NewOption, idx);  
 NewOption.innerText = innerText;  
 NewOption.value = 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 = value;  
 this.options[idx].innerText = innerText;  
 this.syncOptions();  
 this.syncSelectedIndex();  
}

except = ('number'==typeof(except)) ? except : -1;

if (SS_VAR.bEventAttached && bHasToDetachEvent) {  
  document.detachEvent('onmousedown', SS_blurExcept);  
  document.detachEvent('ondblclick', SS_blurExcept);  
  SS_VAR.bEventAttached = false;  
 }  
}  
function SS_syncSelectedIndex ()  
{  
 this.selectedIndex = this.select.selectedIndex;

if (this.bOriginalSelect) return;

if (this.TitleTable.cells(0).childNodes(0).innerText != this.options[this.selectedIndex].innerText)  
  this.TitleTable.cells(0).childNodes(0).innerText = this.options[this.selectedIndex].innerText;  
 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();  
 }  
 else {  
  this.OptionsDiv.style.display = 'none';  
  if (!bStrict) {  
   this.toggleTitle(true);  
  }  
 }  
 if (!bStrict) {  
  this.bFocused = true;

if (!SS_VAR.bEventAttached) {  
   document.attachEvent('onmousedown', SS_blurExcept);  
   document.attachEvent('ondblclick', SS_blurExcept);  
   SS_VAR.bEventAttached = true;  
  }  
 }  
}  
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.selectedIndex;  
 if ('mousewheel'==event.type && this.bFocused && this.bReverse) {  
  for (var i=0; i < event.wheelDelta; i += 120)  
   idx--;  
  for (var i=0; i > event.wheelDelta; i -= 120)  
   idx++;  
 }  
 idx = Math.max(idx, 0);  
 idx = Math.min(idx, this.options.length - 1);  
 this.select.selectedIndex = idx;  
}  
function SS_handleOverTitle ()  
{  
 if (this.bExpanded)  
  return;

this.TitleTable.style.borderColor = SS_ENV.CR.BorderActive;  
 this.TitleTable.cells(1).style.display = 'none';  
 this.TitleTable.cells(2).style.display = 'block';  
}  
function SS_handleOutTitle ()  
{  
 this.TitleTable.style.borderColor = SS_ENV.CR.Border;  
 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.length; i++) {  
  if (i==idx)  
   this.turnOnOption(i);  
  else  
   this.turnOffOption(i);  
 }  
}  
function SS_turnOnOption (idx)  
{  
 this.OptionsTable.cells(idx).style.color = SS_ENV.CR.ReverseText;  
 this.OptionsTable.cells(idx).style.backgroundColor = SS_ENV.CR.ReverseBackground;  
}  
function SS_turnOffOption (idx)  
{  
 this.OptionsTable.cells(idx).style.color = '';  
 this.OptionsTable.cells(idx).style.backgroundColor = '';  
}  
function SS_adjustOptionsDiv ()  
{  
 if (this.bOriginalSelect) return;

this.OptionsDiv.style.width = this.width;  
 this.OptionsDiv.style.height = Math.min(this.options.length, this.ListMax) * this.OptionHeight + 2;  
 this.OptionsWrapper.style.height = this.options.length * this.OptionHeight;  
 this.OptionsDiv.style.overflowY = (this.options.length > this.ListMax) ? 'scroll' : '';

var top = this.Table.offsetTop;  
 var left = this.Table.offsetLeft;  
 for (var El = this.Table.offsetParent; 'BODY'!=El.tagName && 'absolute'!=El.style.position && 'relative'!=El.style.position; El = El.offsetParent) {  
  if ('TABLE' != El.tagName) {  
   top += El.clientTop;  
   left += El.clientLeft;  
  }  
  top += El.offsetTop;  
  left += El.offsetLeft;  
 }  
 this.OptionsDiv.style.top = (this.bListDown) ? (top + this.height) : (top - parseInt(this.OptionsDiv.style.height));  
 this.OptionsDiv.style.left = left;

this.TitleWrapper.style.top = 0;  
 this.TitleWrapper.style.left = 0;  
}  
function SS_syncOptions ()  
{  
 if (this.bOriginalSelect) return;

for (var i=0; i < this.options.length; 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].innerText;  
 }  
}  
function SS_pressTitle (event)  
{  
 SS_cancelEvent(event);

this.srcElementOfLastMousedown = event.srcElement;

this.toggleOptions();  
}  
function SS_releaseTitle (event)  
{  
 SS_cancelEvent(event);

if (this.isThisEventToBeCanceled(event)) return;

this.srcElementOfLastMousedown = null;  
}  
function SS_pressOption (event)  
{  
 SS_cancelEvent(event);

this.srcElementOfLastMousedown = event.srcElement;  
}  
function SS_moveOption (event)  
{  
 SS_cancelEvent(event);

if (this.isThisEventToBeCanceled(event)) return;  
 if (!(event.offsetX >= 0 && event.offsetX <= this.OptionsTable.offsetWidth)) return;

this.handleOverOption(Math.floor(event.offsetY / this.OptionHeight));  
}  
function SS_releaseOption (event)  
{  
 SS_cancelEvent(event);

if (this.isThisEventToBeCanceled(event)) return;

this.srcElementOfLastMousedown = null;

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:fixed; cursor:default'>"  
  + "<tr><td></td></tr>"  
  + "</table>"  
 );  
 if (!isNaN(this.width))  
  this.Table.style.width = this.width;  
 this.Table.style.height = this.height;

if (!this.bOriginalSelect) {  
  this.createTitleDiv();  
  this.createOptionsDiv();  
  this.Table.cells(0).appendChild(this.TitleDiv);  
  this.Table.cells(0).appendChild(this.OptionsDiv);  
 }  
 else {  
  this.Table.cells(0).appendChild(this.select);  
 }  
}  
function SS_createTitleDiv ()  
{  
 this.TitleDiv = SS_createElement(""  
  + "<div style='position:relative; top:0; left:0;'>"  
  + " <table border=0 cellpadding=0 cellspacing=1"  
  + "  height="+this.height  
  + "  bgcolor=white"  
  + "  style='table-layout:fixed; border:1 solid "+SS_ENV.CR.Border+";'"  
  + "  onmouseover='SS_VAR.SelectList["+this.ssID+"].adjustOptionsDiv()'"  
  + " >"  
  + " <tr>"  
  + "  <td><nobr style='text-oveflow:hidden;"+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].innerText;  
 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:absolute; 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.TitleWrapper;  
 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.length; i++) {  
  this.createOptionTr(i);  
 }  
 this.syncOptions();  
 this.OptionsWrapper = document.createElement(""  
  + "<img src='"+SS_ENV.ImgPrefix+"/img_blank.gif'"  
  + " style='position:absolute; 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.OptionsWrapper;  
 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);  
}  
</SCRIPT>  
</head>  
<body><script>SS_write("<select style='width:60;height:18px;font-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>
  
<script>SS_write("<select name='province' style='width:60;height:18px;font-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>  
</body>  
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]