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

时间：2021-02-22 18:04:02|栏目：JavaScript代码|点击：次

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

<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();  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)  {   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();  }  function SS_cancelEvent (event)  {   event.cancelBubble = true;   event.returnValue = false;  }  function SS_isThisEventToBeCanceled (event)  {   if ('object' == typeof(event)) {    switch (event.type) {     case 'mousedown':      if (!(event.button & 1)) return true;      break;     case 'mouseup':      if (!(event.button & 1)) return true;      if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null) {       this.srcElementOfLastMousedown = null;       return true;      }      break;     case 'mouseout':      if (!(SS_ENV.IE_Version < 5.5 && event.srcElement == this.srcElementOfLastMousedown))       return true;      break;     case 'mousemove':      if (SS_ENV.IE_Version >= 5.5 && event.srcElement != this.srcElementOfLastMousedown && this.srcElementOfLastMousedown != null)       return true;      break;    }   }   return false;  }  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 = true;   for (var i=0; i < SS_VAR.SelectList.length; 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 = false;    }    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 = false;    }   }   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 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：仿jQuery的siblings效果的js代码

栏目：JavaScript代码

下一篇：JavaScript实现俄罗斯方块游戏过程分析及源码分享

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

本文地址：http://www.codeinn.net/misctech/68085.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程