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

很漂亮，比较适合女性一类比较温馨的网站
</p> <p><title>漂亮的<a href="https://kunjuke.com/tag/147/" title="下拉" target="_blank">下拉</a>框</title> </p> <p>// viaselect environment constants<br /> var ss_env = new object();<br /> ss_env.ie_version = new number(((window.navigator.appversion.split('; '))[1].split(' '))[1]);<br /> ss_env.cr = new object();<br /> ss_env.cr.reversebackground = '#e2519c';<br /> ss_env.cr.reversetext = 'white';<br /> ss_env.cr.border = '#d55c9a';<br /> ss_env.cr.borderactive = '#ff6cb7';<br /> ss_env.imgprefix = 'http://www.viafriend.com/images';<br /> ss_env.defaultheight = 20;<br /> ss_env.buttonwidth = 13;<br /> ss_env.optionsdivstyle = ''<br /> + ' display:none;'<br /> + ' z-index:10;'<br /> + ' position:absolute;'<br /> + ' border:1 solid '+ ss_env.cr.border+';'<br /> + ' background-color:white;'<br /> + ' scrollbar-face-color:#d4d0c8;'<br /> + ' scrollbar-shadow-color:white;'<br /> + ' scrollbar-highlight-color:#f6f5f4;'<br /> + ' scrollbar-3dlight-color:white'<br /> + ' scrollbar-darkshadow-color:#86837e;'<br /> + ' scrollbar-track-color:#f6f5f4;'<br /> + ' scrollbar-arrow-color:#86837e;';<br /> ss_env.optionnobrstyle = ''<br /> + ' font-size:12px;'<br /> + ' font-family:奔覆;';<br /> // sayselect variables<br /> var ss_var = new object();<br /> ss_var.divdummy = document.createelement("div");<br /> ss_var.selectlist = new array();<br /> ss_var.beventattached = false; </p> <p>var ss_createdelements = new object(); </p> <p>function unloadobjects()<br /> {<br /> try {<br /> if (ss_var && ss_var.selectlist)<br /> {<br /> for (key in ss_var.selectlist)<br /> {<br /> if (ss_var.selectlist[key])<br /> {<br /> try {<br /> ss_var.selectlist[key].select.setattribute('ss', 0);<br /> } catch (e) {};<br /> delete ss_var.selectlist[key];<br /> }<br /> }<br /> }<br /> } catch (e) {};<br /> } </p> <p>attachevent("onunload", unloadobjects); </p> <p>function ss_create (srchtml, listmax, bautodetect)<br /> {<br /> // property<br /> this.ssid = ss_var.selectlist.length;<br /> this.boriginalselect = (bautodetect && ss_env.ie_version = 5.5 && event.srcelement != this.srcelementoflastmousedown && this.srcelementoflastmousedown != null) {<br /> this.srcelementoflastmousedown = null;<br /> return true;<br /> }<br /> break;<br /> case 'mouseout':<br /> if (!(ss_env.ie_version = 5.5 && event.srcelement != this.srcelementoflastmousedown && this.srcelementoflastmousedown != null)<br /> return true;<br /> break;<br /> }<br /> }<br /> return false;<br /> }<br /> function ss_createelement (html)<br /> {<br /> ss_var.divdummy.insertadjacenthtml('afterbegin', html);<br /> var oel = ss_var.divdummy.children(0);<br /> while (ss_var.divdummy.children.length > 0) {<br /> ss_var.divdummy.removechild(ss_var.divdummy.children(0));<br /> }<br /> return oel;<br /> }<br /> function ss_blurexcept (except)<br /> {<br /> ss_cancelevent(window.event); </p> <p> except = ('number'==typeof(except)) ? except : -1; </p> <p> var bhastodetachevent = true;<br /> for (var i=0; i < ss_var.selectlist.length; i++) {<br /> if (-1==except && ss_var.selectlist[i].bfocused && ss_var.selectlist[i].bexpanded) {<br /> ss_var.selectlist[i].toggleoptions(false, true);<br /> ss_var.selectlist[i].toggletitle(true);<br /> bhastodetachevent = false;<br /> }<br /> else if (i!=except) {<br /> if (ss_var.selectlist[i].bexpanded)<br /> ss_var.selectlist[i].toggleoptions(false, true);<br /> if (ss_var.selectlist[i].breverse)<br /> ss_var.selectlist[i].toggletitle(false);<br /> ss_var.selectlist[i].bfocused = false;<br /> }<br /> } </p> <p> if (ss_var.beventattached && bhastodetachevent) {<br /> document.detachevent('onmousedown', ss_blurexcept);<br /> document.detachevent('ondblclick', ss_blurexcept);<br /> ss_var.beventattached = false;<br /> }<br /> }<br /> function ss_syncselectedindex ()<br /> {<br /> this.selectedindex = this.select.selectedindex; </p> <p> if (this.boriginalselect) return; </p> <p> if (this.titletable.cells(0).childnodes(0).innertext != this.options[this.selectedindex].innertext)<br /> this.titletable.cells(0).childnodes(0).innertext = this.options[this.selectedindex].innertext;<br /> if (this.bexpanded)<br /> this.toggleoptions(false);<br /> }<br /> function ss_toggletitle (breverse)<br /> {<br /> this.breverse = ('undefined'!=typeof(breverse)) ? breverse: (!this.breverse);<br /> this.titletable.cells(0).style.backgroundcolor = this.breverse ? ss_env.cr.reversebackground : '';<br /> this.titletable.cells(0).style.color = this.breverse ? ss_env.cr.reversetext : '';<br /> }<br /> function ss_toggleoptions (bexpanded, bstrict)<br /> {<br /> if (!bstrict && !this.bfocused) {<br /> ss_blurexcept(this.ssid);<br /> }<br /> this.bexpanded = ('undefined'!=typeof(bexpanded)) ? bexpanded: (!this.bexpanded);<br /> if (this.bexpanded) {<br /> this.adjustoptionsdiv();<br /> this.optionsdiv.style.display = 'block';<br /> if (!bstrict) {<br /> this.toggletitle(false);<br /> this.handleoveroption(this.selectedindex);<br /> }<br /> this.handleouttitle();<br /> }<br /> else {<br /> this.optionsdiv.style.display = 'none';<br /> if (!bstrict) {<br /> this.toggletitle(true);<br /> }<br /> }<br /> if (!bstrict) {<br /> this.bfocused = true; </p> <p> if (!ss_var.beventattached) {<br /> document.attachevent('onmousedown', ss_blurexcept);<br /> document.attachevent('ondblclick', ss_blurexcept);<br /> ss_var.beventattached = true;<br /> }<br /> }<br /> }<br /> function ss_handlepropertychange ()<br /> {<br /> if ('propertychange'==window.event.type && 'selectedindex'==window.event.propertyname) {<br /> var oss = window.event.srcelement.ss;<br /> oss.syncselectedindex(); </p> <p> if (null != oss.select.onchange)<br /> oss.select.onchange();<br /> }<br /> }<br /> function ss_handlemousewheel (event)<br /> {<br /> var idx = this.selectedindex;<br /> if ('mousewheel'==event.type && this.bfocused && this.breverse) {<br /> for (var i=0; i event.wheeldelta; i -= 120)<br /> idx++;<br /> }<br /> idx = math.max(idx, 0);<br /> idx = math.min(idx, this.options.length - 1);<br /> this.select.selectedindex = idx;<br /> }<br /> function ss_handleovertitle ()<br /> {<br /> if (this.bexpanded)<br /> return; </p> <p> this.titletable.style.bordercolor = ss_env.cr.borderactive;<br /> this.titletable.cells(1).style.display = 'none';<br /> this.titletable.cells(2).style.display = 'block';<br /> }<br /> function ss_handleouttitle ()<br /> {<br /> this.titletable.style.bordercolor = ss_env.cr.border;<br /> this.titletable.cells(2).style.display = 'none';<br /> this.titletable.cells(1).style.display = 'block';<br /> }<br /> function ss_handleoveroption (idx)<br /> {<br /> for (var i=0; i this.listmax) ? 'scroll' : ''; </p> <p> var top = this.table.offsettop;<br /> var left = this.table.offsetleft;<br /> for (var el = this.table.offsetparent; 'body'!=el.tagname && 'absolute'!=el.style.position && 'relative'!=el.style.position; el = el.offsetparent) {<br /> if ('table' != el.tagname) {<br /> top += el.clienttop;<br /> left += el.clientleft;<br /> }<br /> top += el.offsettop;<br /> left += el.offsetleft;<br /> }<br /> this.optionsdiv.style.top = (this.blistdown) ? (top + this.height) : (top - parseint(this.optionsdiv.style.height));<br /> this.optionsdiv.style.left = left; </p> <p> this.titlewrapper.style.top = 0;<br /> this.titlewrapper.style.left = 0;<br /> }<br /> function ss_syncoptions ()<br /> {<br /> if (this.boriginalselect) return; </p> <p> for (var i=0; i = 0 && event.offsetx = 0 && event.offsetx <= this.optionstable.offsetwidth) {<br /> this.toggleoptions(false);<br /> this.select.selectedindex = math.floor(event.offsety / this.optionheight);<br /> }<br /> }<br /> function ss_createtable ()<br /> {<br /> this.table = ss_createelement(""<br /> + "</p> <table border="0" cellpadding="0" cellspacing="0" style='cursor:default'>"<br /> + "</p> <tr> <td></td> </tr> <p>"<br /> + "</table> <p>"<br /> );<br /> if (!isnan(this.width))<br /> this.table.style.width = this.width;<br /> this.table.style.height = this.height; </p> <p> if (!this.boriginalselect) {<br /> this.createtitlediv();<br /> this.createoptionsdiv();<br /> this.table.cells(0).appendchild(this.titlediv);<br /> this.table.cells(0).appendchild(this.optionsdiv);<br /> }<br /> else {<br /> this.table.cells(0).appendchild(this.select);<br /> }<br /> }<br /> function ss_createtitlediv ()<br /> {<br /> this.titlediv = ss_createelement(""<br /> + ""<br /> + " </p> <table border="0" cellpadding="0">"<br /> + " </p> <tr>"<br /> + " </p> <td></td> <p>"<br /> + " </p> <td width="+ss_env.buttonwidth+" align="center"></td> <p>"<br /> + " </p> <td width="+ss_env.buttonwidth+" align="center"></td> <p>"<br /> + " </p> <td></td> <p>"<br /> + " </tr> <p>"<br /> + " </table> <p>"<br /> + ""<br /> );<br /> this.titletable = this.titlediv.childnodes(0);<br /> this.titletable.cells(0).childnodes(0).innertext = this.options[this.selectedindex].innertext;<br /> this.titletable.cells(1).innerhtml = "";<br /> this.titletable.cells(2).innerhtml = "";<br /> this.titletable.cells(3).appendchild(this.select);<br /> this.titlewrapper = document.createelement(""<br /> + ""<br /> );<br /> ss_createdelements[ss_createdelements.length] = this.titlewrapper;<br /> this.titlediv.appendchild(this.titlewrapper);<br /> }<br /> function ss_createoptionsdiv ()<br /> {<br /> this.optionsdiv = ss_createelement(""<br /> + ""<br /> + " </p> <table border="0" cellpadding="0" cellspacing="0" width="100%">"<br /> + " </table> <p>"<br /> + ""<br /> );<br /> this.optionstable = this.optionsdiv.childnodes(0);<br /> for (var i=0; i < this.options.length; i++) {<br /> this.createoptiontr(i);<br /> }<br /> this.syncoptions();<br /> this.optionswrapper = document.createelement(""<br /> + ""<br /> );<br /> ss_createdelements[ss_createdelements.length] = this.optionswrapper;<br /> this.optionsdiv.appendchild(this.optionswrapper);<br /> }<br /> function ss_createoptiontr (idx)<br /> {<br /> idx = ('undefined'!=typeof(idx)) ? idx : this.options.length - 1;<br /> var optiontr = this.optionstable.insertrow(-1);<br /> var optiontd = document.createelement("</p> <td height="+this.optionheight+"></td> <p>");<br /> ss_createdelements[ss_createdelements.length] = this.optionstd;<br /> optiontd.appendchild(document.createelement(""));<br /> optiontr.appendchild(optiontd);<br /> } </p> <p>ss_write("\n"<br /> +" 不限\n"<br /> +"水瓶座"<br /> +"双鱼座"<br /> +"白羊座"<br /> +"金牛座"<br /> +"双子座"<br /> +"巨蟹座"<br /> +"狮子座"<br /> +"处女座"<br /> +"天秤座"<br /> +"天蝎座"<br /> +"射手座"<br /> +"摩羯座"<br /> +"\n"); </p> <p>ss_write("\n"<br /> +"都行\n"<br /> +"北京"<br /> +"上海"<br /> +"天津"<br /> +"重庆"<br /> +"安徽"<br /> +"福建"<br /> +"甘肃"<br /> +"广东"<br /> +"广西"<br /> +"贵州"<br /> +"海南"<br /> +"河北"<br /> +"黑龙江"<br /> +"河南"<br /> +"湖北"<br /> +"湖南"<br /> +"内蒙古"<br /> +"江苏"<br /> +"江西"<br /> +"吉林"<br /> +"辽宁"<br /> +"宁夏"<br /> +"青海"<br /> +"山西"<br /> +"陕西"<br /> +"山东"<br /> +"四川"<br /> +"江西"<br /> +"西藏"<br /> +"新疆"<br /> +"云南"<br /> +"浙江"<br /> +"其它"<br /> +"\n",8); </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]