最初的select的确很平淡,就是一个下拉选项列表:
<style> select,option {background-color:lime} </style> <select> <center> <option>1 <option>2 <option>不是一样的嘛</select>
日久天长之后,人们对select要求高了,要修一修边幅:
<br><br> <script> i=1; </script> <center> <form name="form1"> <select name="select01"> <option>11111 111111 111111111111</option> <option>2222222</option> <option>333333</option> <option>4444444</option> </select> <span style="position:relative;left:-23px;width:17px;height:17px;font:7px 'wingdings 3';color:#cc0000;background:cyan;border:2px outset;text-align:center;padding-top:3px;cursor:default" onclick="if(i>=document.form1.select01.options.length){i=0}document.form1.select01.options[i].selected=true;i++">q <iframe src="" style="position:absolute;top:0;left:0;z-index:-1; width:15px;height:15px;filter:alpha(opacity=0))" frameborder="0"></iframe> </span> </form> <br><br><br> <html> <head> <title>untitled document</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style> .table1{background-color:white;font-family: courier new, courier;font-size:12px} .td_out{font-family: courier new, courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;} .td_over{font-family: courier new, courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px} .slv{vertical-align:bottom;font-family: courier new, courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;} .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#d0dff7;border:1 solid #9fa3ce;writing-mode:tb-rl;font-weight:bold; } .selp{ position:absolute;z-index:1000;overflow-x:hidden;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: #ffffff; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #d0dff7;} </style> <script language="javascript"> document.onclick=hiddendiv; function getdivcount() { var arr=document.all; re=0; for (i=0;i<arr.length;i++) { str=arr[i].id; if (str.indexof("zfdiv_")==0) { re++; } } return re; } function geti(objid) {//取得objid的最后一位数字 for (i=0;i<objid.length;i++) { if (objid.charat(i)=="_") return objid.substr(i+1,objid.length-1); } return 0; } 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.length;i++)da.rows[i].style.display='' for(i=0;i<da.rows.length;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.offsetleft; while(e=e.offsetparent){ l+=e.offsetleft; } return l } function gett(e){ var t=e.offsettop; while(e=e.offsetparent){ t+=e.offsettop; } return t } 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.offsetwidth; da.style.pixelwidth=sv.offsetwidth; 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'; } else { sv.style.pixelheight=da.offsetheight; 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.length;i++)tb.rows[i].style.display='' getposition(id); } else { sv.style.display='none'; } }//下拉摸拟层 function hiddendiv(){ var o=window.event.srcelement.id; var tb var sv if(o=="") { for (j=0;j<getdivcount();j++) { tb=document.getelementbyid('zfdata_'+j); sv=document.getelementbyid('zfdiv_'+j); for(i=0;i<tb.rows.length;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.innertext; sv.style.display='none'; //sldindex=obj.parentelement.rowindex; }//给文本框赋值 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()){return;} 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"; v=''; } //增加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=true;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('<p id="zfdiv_'+i+'" class="selp" style="display:none;"><table id="zfdata_'+i+'" onselectstart="return false" border="0" cellspacing="0" cellpadding="0" class="table1"></table></p>'); } </script> </head> <body> <script language="javascript"> addtext("name1","a"); add("1234",0); add("1234",0); addtext("name1","a"); add("1234",1); add("1234",1); </script>
要加一些链接,变成菜单:
<style> body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)} </style> <style> .select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;} .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;} .selecttable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;} .option {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;} .dropdown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;} .select .button {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;} </style> <script type="text/javascript"> var overoptioncss = "background: highlight; color: highlighttext"; var sizedbordercss = "2 inset buttonhighlight"; var globalselect; var ie4 = (document.all != null); var q = 0; function initselectbox(el) { copyselected(el); var size = el.getattribute("size"); el.options = el.children[1].children; el.selectedindex = findselected(el); el.remove = new function("i", "int_remove(this,i)"); el.item = new function("i", "return this.options[i]"); el.add = new function("e", "i", "int_add(this, e, i)"); el.options[el.selectedindex].selected = true; dropdown = el.children[1]; if (size != null) { if (size > 1) { el.size = size; dropdown.style.zindex = 0; initsized(el); } else { 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 = "<p 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.text; html += "</p>" 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.size; i++) { h += dropdown.children[i].offsetheight; } if (dropdown.style.borderwidth != null) { dropdown.style.pixelheight = h + 4; } else dropdown.style.height = h; } dropdown.style.border = sizedbordercss; el.style.height = dropdown.style.pixelheight; } 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 = null; ec = el.children[1].children; var ecl = ec.length; for (var i=0; i<ecl; i++) { if (ec[i].getattribute("selected") != null) { if (selected == null) { selected = i; } else ec[i].removeattribute("selected"); } } if (selected == null) selected = 0; return selected; } 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); else hidedropdown(dropdown); } } function optionclick() { el = getreal(window.event.srcelement, "classname", "option"); if (el.classname == "option") { dropdown = el.parentelement; selectbox = dropdown.parentelement; 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)); } else { globalselect = selectbox; eval(selectbox.onchange.replace(/this/g, "globalselect")); } } if (el.backupcss != null) el.style.csstext = el.backupcss; 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) return; var el = toel; if (el.classname == "option") { if (el.backupcss == null) el.backupcss = el.style.csstext; highlightselected(el.parentelement.parentelement, false); el.style.csstext = el.backupcss + "; " + overoptioncss; this.highlighted = true; } } 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) return; if (toel.classname != "option") return; } if (toel != null) { if (toel.classname != "option") { if (fromel.classname == "option") highlightselected(fromel.parentelement.parentelement, true); } } if (toel == fromel) return; var el = fromel; if (el.classname == "option") { if (el.backupcss != null) el.style.csstext = el.backupcss; } } function highlightselected(el,add) { var selectedindex = findselected(el); selected = el.children[1].children[selectedindex]; if (add) { if (selected.backupcss == null) selected.backupcss = selected.style.csstext; selected.style.csstext = selected.backupcss + "; " + overoptioncss; } else if (!add) { if (selected.backupcss != null) selected.style.csstext = selected.backupcss; } } 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.length; 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++] = dropdown; } } for (var j=0; j<selects.length; j++) { hidedropdown(selects[j]); } } function hidedropdown(el) { if (typeof(fade) == "function") fade(el, false); else el.style.visibility = "hidden"; } function showdropdown(el) { if (typeof(fade) == "function") fade(el, true); else if (typeof(swipe) == "function") swipe(el, 2); else 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.length; i++) { if (spans[i].classname == "select") selects[index++] = spans[i]; } for (var j=0; j<selects.length; j++) { initselectbox(selects[j]); } } function getreal(el, type, value) { temp = el; while ((temp != null) && (temp.tagname != "body")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentelement; } return el; } if (ie4) { window.onload = initselectboxes; document.onclick = hideshowndropdowns; } function writeselectbox(matrix, id, size, onchange, css) { var d = window.document; var ie4 = (document.all != null); if (ie4) { //alert("before!"); var s = createiestring(matrix, id, size, onchange, css); document.write(s); //alert("after!"); }else { document.write(createxstring(matrix, id, size, onchange, css));} } function createiestring(matrix, id, size, onchange, css) { var str = ""; str += '<span class="select"'; if (size == null) size = 1; 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: relative; left: 0; top: -2; width: 100%;">6</span></td>\n'; str += '</tr>\n'; str += '</table>\n'; str += '<p class="dropdown" onclick="optionclick()" onmouseover="optionover()" onmouseout="optionout()">\n'; for (var i=0; i<matrix.length; i++) { html = matrix[i].html; value = matrix[i].value; css = matrix[i].css; selected = matrix[i].selected; str += '<p class="option"'; if (value != null) str += ' value="' + value + '"'; if (css != null) str += ' style="' + css + '"'; if (selected != null) str += ' selected'; str += '>\n'; str += html; str += '</p>\n'; } str += '</p>\n'; str += '</span>\n'; return str; } function createxstring(matrix, id, size, onchange, css) { var str = '<form>\n'; str += '<select'; if (size == null) size = 1; str += ' size="' + size + '"'; if (id != null) str += ' id="' + id + '"'; if (onchange != null) str += ' onchange="' + onchange + '"'; str += '>\n'; for (var i=0; i<matrix.length; i++) { html = matrix[i].html; value = matrix[i].value; css = matrix[i].css; selected = matrix[i].selected; 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'; return str; } function striptags(str) { var s = 0; var e = -1; var r = ""; s = str.indexof("<",e); do { 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); return r; } function option(html, value, css, selected) { this.html = html; this.value = value; this.css = css; this.selected = selected; } </script> <script type="text/javascript"> var optionarray = new array(); optionarray[0] = new option("item 1", "value 1", "color: blue; text-decoration: underline;"); optionarray[1] = new option("item <b>2</b>", "value 2"); optionarray[2] = new option("item 3", "value 3", "color: red;", "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> <br> <script type="text/javascript"> writeselectbox(optionarray, "select3", 3, "alert(this.options[this.selectedindex].value)", "margin-left: 10;"); </script> <br><br><br><br> <select onchange="if(this.options[this.selectedindex].value!=''){location=this.options[this.selectedindex].value;}" > <option value="http://www.163.com">网易</option> <option value="http://www.google.com">google</option> <option value="http://wwwsohu.com">搜狐</option> </select> <br><br><br><br> <form> <select size="1" name="d1" onchange=if(s=document.getelementbyid("s1")){s.style.backgroundcolor=value}> <option selected value="white">请选择颜色</option> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="green">绿色</option> </select> <br> <textarea rows="20" name="s1" cols="35"></textarea> </form> <br><br>
<script language="javascript"> var mmenus = new array(); var misshow = new boolean(); misshow=false; var misdown = new boolean(); misdown=false; var musestatus=false; var mpoptimer = 0; mmenucolor='#396da5';mfontcolor='#80ffff';mmenuoutcolor='#396da5';mmenuincolor='#9595ff';mmenuoutbordercolor='#00ffff';mmenuinbordercolor='#000000';mmidoutcolor='#269dc3';mmidincolor='#26486e';mmenuovercolor='#ffff00';mitemedge='1';msubedge='0';mmenuunitwidth=60;mmenuitemwidth=160;mmenuheight=30;mmenuwidth='300';mmenuadjust=0;mmenuadjustv=0;mfonts='font-family: verdana; font-size: 8pt; color: #80ffff; ';mcursor='default'; var swipesteps = 4; var swipemsec = 25; var swipearray = new array(); function swipe(el, dir, steps, msec) { if (steps == null) steps = swipesteps; if (msec == null) msec = swipemsec; if (el.swipeindex == null) el.swipeindex = swipearray.length; if (el.swipetimer != null) window.cleartimeout(el.swipetimer); swipearray[el.swipeindex] = el; el.style.clip = "rect(-99999, 99999, 99999, -99999)"; if (el.swipecounter == null || el.swipecounter == 0) { el.orgleft = el.offsetleft; el.orgtop = el.offsettop; el.orgwidth = el.offsetwidth; el.orgheight = el.offsetheight; } el.swipecounter = steps; el.style.clip = "rect(0,0,0,0)"; window.settimeout("repeat(" + dir + "," + el.swipeindex + "," + steps + "," + msec + ")", msec); } function repeat(dir, index, steps, msec) { el = swipearray[index]; var left = el.orgleft; var top = el.orgtop; var width = el.orgwidth; var height = el.orgheight; if (el.swipecounter == 0) { el.style.clip = "rect(-99999, 99999, 99999, -99999)"; return; } else { el.swipecounter--; el.style.visibility = "visible"; switch (dir) { case 2: el.style.clip = "rect(" + height*el.swipecounter/steps + "," + width + "," + height + "," + 0 + ")"; el.style.top = top - height*el.swipecounter/steps; break; case 8: el.style.clip = "rect(" + 0 + "," + width + "," + height*(steps-el.swipecounter)/steps + "," + 0 + ")"; el.style.top = top + height*el.swipecounter/steps; break; case 6: el.style.clip = "rect(" + 0 + "," + width + "," + height + "," + width*(el.swipecounter)/steps + ")"; el.style.left = left - width*el.swipecounter/steps; break; case 4: el.style.clip = "rect(" + 0 + "," + width*(swipesteps - el.swipecounter)/steps + "," + height + "," + 0 + ")"; el.style.left = left + width*el.swipecounter/steps; break; } el.swipetimer = window.settimeout("repeat(" + dir + "," + index + "," + steps + "," + msec + ")", msec); } } var mtmpleft=""; var mtmptop=""; function hideswipe(el) { window.cleartimeout(el.swipetimer); el.style.visibility = "hidden"; el.style.clip = "rect(-99999, 99999, 99999, -99999)"; el.swipecounter = 0; if(mtmpleft!="")el.style.left = mtmpleft; if(mtmptop!="")el.style.top = mtmptop; } function stoperror(){ return true; } window.onerror=stoperror; function mpopout() { mpoptimer = settimeout('mallhide()', 500); } function getreal(el, type, value) { temp = el; while ((temp != null) && (temp.tagname != "body")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentelement; } return el; } function mmenuregister(menu) { mmenus[mmenus.length] = menu return (mmenus.length - 1) } function mmenuitem(caption,command,target,isline,statustxt,img,sizex,sizey,pos){ this.caption=caption; this.command=command; this.target=target; this.isline=isline; this.statustxt=statustxt; this.img=img; this.sizex=sizex; this.sizey=sizey; this.pos=pos; } function mmenu(caption,command,target,img,sizex,sizey,pos){ this.items = new array(); this.caption=caption; this.command=command; this.target=target; this.img=img; this.sizex=sizex; this.sizey=sizey; this.pos=pos; this.id=mmenuregister(this); } function mmenuadditem(item) { this.items[this.items.length] = item item.parent = this.id; this.children=true; } mmenu.prototype.additem = mmenuadditem; function mtoout(src){ src.style.borderleftcolor=mmenuoutbordercolor; src.style.borderrightcolor=mmenuinbordercolor; src.style.bordertopcolor=mmenuoutbordercolor; src.style.borderbottomcolor=mmenuinbordercolor; src.style.backgroundcolor=mmenuoutcolor; src.style.color=mmenuovercolor; } function mtoin(src){ src.style.borderleftcolor=mmenuinbordercolor; src.style.borderrightcolor=mmenuoutbordercolor; src.style.bordertopcolor=mmenuinbordercolor; src.style.borderbottomcolor=mmenuoutbordercolor; src.style.backgroundcolor=mmenuincolor; src.style.color=mmenuovercolor; } function mnochange(src){ src.style.borderleftcolor=mmenucolor; src.style.borderrightcolor=mmenucolor; src.style.bordertopcolor=mmenucolor; src.style.borderbottomcolor=mmenucolor; src.style.backgroundcolor=''; src.style.color=mfontcolor; } function mallhide(){ for(var nummenu=0;nummenu<mmenus.length;nummenu++){ var themenu=document.all['mmenu'+nummenu] var themenup=document.all['mmenup'+nummenu] mnochange(themenu); mmenuhide(themenup); } } function mmenuhide(menuid){ hideswipe(menuid); misshow=false; } function mmenushow(menuid,pid){ menuid.style.left=mmenutable.offsetleft+pid.offsetleft+mmenuadjust;menuid.style.top=mmenutable.offsettop-menuid.offsetheight+mmenuadjustv; if(mmenuitemwidth+parseint(menuid.style.left)>document.body.clientwidth+document.body.scrollleft) menuid.style.left=document.body.clientwidth+document.body.scrollleft-mmenuitemwidth; mtmpleft=menuid.style.left;mtmptop=menuid.style.top;swipe(menuid,8,4); misshow=true; } function mmenu_over(menuid,x){ toel = getreal(window.event.toelement, "classname", "coolbutton"); fromel = getreal(window.event.fromelement, "classname", "coolbutton"); if (toel == fromel) return; if(x==4){ misshow = false; mallhide(); mtoout(eval("mmenu"+x)); }else{ if(!misshow){mtoout(eval("mmenu"+x));}else{ mallhide(); mtoin(eval("mmenu"+x)); mmenushow(menuid,eval("mmenu"+x)); } } } function mmenu_out(x){ toel = getreal(window.event.toelement, "classname", "coolbutton"); fromel = getreal(window.event.fromelement, "classname", "coolbutton"); if (toel == fromel) return; if (misshow){ mtoin(eval("mmenu"+x)); }else{ mnochange(eval("mmenu"+x)); } } function mmenu_down(menuid,x){ if(misshow){ mmenuhide(menuid); mtoout(eval("mmenu"+x)); } else{ mtoin(eval("mmenu"+x)); mmenushow(menuid,eval("mmenu"+x)); misdown=true; } } function mmenu_up(){ misdown=false; } function mmenuitem_over(x,i){ srcel = getreal(window.event.srcelement, "classname", "coolbutton"); if(misdown){ mtoin(srcel); } else{ mtoout(srcel); } mthestatus = mmenus[x].items[i].statustxt; if(mthestatus!=""){ musestatus=true; window.status=mthestatus; } } function mmenuitem_out(){ srcel = getreal(window.event.srcelement, "classname", "coolbutton"); mnochange(srcel); if(musestatus)window.status=""; } function mmenuitem_down(){ srcel = getreal(window.event.srcelement, "classname", "coolbutton"); mtoin(srcel) misdown=true; } function mmenuitem_up(){ srcel = getreal(window.event.srcelement, "classname", "coolbutton"); mtoout(srcel) misdown=false; } function mexec2(x){ var cmd; if(mmenus[x].target=="blank"){ cmd = "window.open('"+mmenus[x].command+"')"; }else{ cmd = mmenus[x].target+".location=\""+mmenus[x].command+"\""; } eval(cmd); } function mexec(x,i){ var cmd; if(mmenus[x].items[i].target=="blank"){ cmd = "window.open('"+mmenus[x].items[i].command+"')"; }else{ cmd = mmenus[x].items[i].target+".location=\""+mmenus[x].items[i].command+"\""; } eval(cmd); } function mbody_click(){ if (misshow){ srcel = getreal(window.event.srcelement, "classname", "coolbutton"); for(var x=0;x<=mmenus.length;x++){ if(srcel.id=="mmenu"+x) return; } mallhide(); } } document.onclick=mbody_click; function mwritetodocument(){ var mwb=1; var stringx='<table id=mmenutable border=0 cellpadding=3 cellspacing=2 width='+mmenuwidth+' height='+mmenuheight+' bgcolor='+mmenucolor+ ' onselectstart="event.returnvalue=false"'+ ' style="position:absolute;cursor:'+mcursor+';'+mfonts+ ' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+ ' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+ 'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+ 'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; padding:0px"><tr>' for(var x=0;x<mmenus.length;x++){ var thismenu=mmenus[x]; var imgsize=""; if(thismenu.sizex!="0"||thismenu.sizey!="0")imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; stringx += "<td nowrap class=coolbutton id=mmenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+ "' width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenup"+x+ ","+x+") onmouseout=mmenu_out("+x+ ") onmousedown=mmenu_down(mmenup"+x+","+x+")"; if(thismenu.command!=""){ stringx += " onmouseup=mmenu_up();mexec2("+x+");"; }else{ stringx += " onmouseup=mmenu_up()"; } if(thismenu.pos=="0"){ stringx += " align=center><img align=absmiddle src='"+thismenu.img+"'"+imgsize+">"+ifspace+thismenu.caption+"</td>"; }else if(thismenu.pos=="1"){ stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src='"+thismenu.img+"'"+imgsize+"></td>"; }else if(thismenu.pos=="2"){ stringx += " align=center background='"+thismenu.img+"'> "+thismenu.caption+" </td>"; }else{ stringx += " align=center> "+thismenu.caption+" </td>"; } stringx += ""; } stringx+="<td width=*> </td></tr></table>"; for(var x=0;x<mmenus.length;x++){ thismenu=mmenus[x]; if(x==4){ stringx+='<p id=mmenup'+x+' style="visiable:none"></p>'; }else{ stringx+='<p id=mmenup'+x+ ' style="cursor:'+mcursor+';position:absolute;'+ 'width:'+mmenuitemwidth+'px; z-index:'+(x+100); if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-left: 1px solid '+mmidoutcolor+ ';border-top: 1px solid '+mmidoutcolor;} stringx+=';border-right: 1px solid '+mmenuinbordercolor+ ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnvalue=false">\n'+ '<table width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+ 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor; if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-right: 1px solid '+mmidincolor+ ';border-bottom: 1px solid '+mmidincolor;} stringx+=';border-top: 1px solid '+mmenuoutbordercolor+ ';padding: 4px" bgcolor='+mmenucolor+'>\n' for(var i=0;i<thismenu.items.length;i++){ var thismenuitem=thismenu.items[i]; var imgsize=""; if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; if(!thismenuitem.isline){ stringx += "<tr><td class=coolbutton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mmenuitem_over("+x+","+i+ ");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup="; stringx += "mmenuitem_up();mexec("+x+","+i+"); "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>"; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>"; }else{ stringx += ">"+thismenuitem.caption+"</td></tr>"; } }else{ stringx+='<tr><td height="1" background="hr.gif" onmousemove="cleartimeout(mpoptimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n'; } }stringx+='</table>\n</p>' } } document.write("<p align='left'>"+stringx+"</p>"); } function mchecklocation(){ if(isnan(mmenuwidth))mmenuwidth=document.body.clientwidth*parseint(mmenuwidth.substring(0,3))/100;ym=eval(document.body.scrolltop)+document.body.clientheight-mmenuheight-10;xm=eval(document.body.scrollleft)+10;y=mmenutable.style.pixeltop;x=mmenutable.style.pixelleft;if(math.abs(ym-y)>1)mmenutable.style.pixeltop=y+=(ym-y)/5;else mmenutable.style.pixeltop=y=ym;if(math.abs(xm-x)>1)mmenutable.style.pixelleft=x+=(xm-x)/5;else mmenutable.style.pixelleft=x=xm;settimeout("mchecklocation()",10);} mpmenu1=new mmenu('file','','self','','','',''); mpmenu1.additem(new mmenuitem('new','javascript:alert(\\"new\\")','self',false,'new','','','','')); mpmenu1.additem(new mmenuitem('open','javascript:alert(\\"open\\")','self',false,'open','','','','')); mpmenu1.additem(new mmenuitem('save','javascript:alert(\\"save\\")','self',false,'save','','','','')); mpmenu1.additem(new mmenuitem(null,null,null,true)); mpmenu1.additem(new mmenuitem('exit','javascript:alert(\\"exit\\")','self',false,'exit','','','','')); mpmenu2=new mmenu('edit','','self','','','',''); mpmenu2.additem(new mmenuitem('undo','javascript:alert(\\"undo\\")','self',false,'undo','','','','')); mpmenu2.additem(new mmenuitem('forward','javascript:alert(\\"forward\\")','self',false,'forward','','','','')); mpmenu2.additem(new mmenuitem(null,null,null,true)); mpmenu2.additem(new mmenuitem('copy','javascript:alert(\\"copy\\")','self',false,'copy','','','','')); mpmenu2.additem(new mmenuitem('paste','javascript:alert(\\"paste\\")','self',false,'paste','','','','')); mpmenu3=new mmenu('favorites','','self','','','',''); mpmenu3.additem(new mmenuitem('my homepage','http://www.knifesoft.com','blank',false,'visit my homepage','','','','')); mpmenu3.additem(new mmenuitem('yahoo','http://www.yahoo.com','blank',false,'visit yahoo','','','','')); mpmenu4=new mmenu('help','','self','','','',''); mpmenu4.additem(new mmenuitem('contect','javascript:alert(\\"contect\\")','self',false,'contect','','','','')); mpmenu4.additem(new mmenuitem('send me an email','mailto:support@knifesoft.com','self',false,'send me an email.','','','','')); mpmenu4.additem(new mmenuitem(null,null,null,true)); mpmenu4.additem(new mmenuitem('about','javascript:alert(\\"about\\")','self',false,'about webmenushop','','','','')); mpmenu4=new mmenu('knifesoft','http://www.knifesoft.com','self','','','',''); mwritetodocument(); mchecklocation(); </script> <br><br><br><br><br><br><br><br><br><br><br><br><br> <select onchange="window.open(this.value,'','')"> <option>产品快速导航</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=1&cateid=1 selected>多媒体产品</option> <option value=http://www.tcl.com/03product/tv/chanpin-hid.htm> dlp数字光显背投</option> <option value=http://www.tclking.com> lcd液晶电视</option> <option value=http://www.tcl.com/03product/tv/chanpin-hid.htm> 数字高清背投</option> <option value=http://www.tcl.com/03product/tv/chanpin-pdp.htm> pdp等离子电视</option> <option value=http://www.tcl.com/03product/tv/chanpin-crt.htm> crt高清彩电</option> <option value=03product/pro2.jsp?cateid=1&cateid=61> 酒店电视</option> <option value=03product/pro2.jsp?cateid=1&cateid=141> 乐华彩电</option> <option value=http://av.tcl.com/03products/list.asp?listid=246> 视盘机</option> <option value=http://www.tcl.com/03product/mon/index.html> 监视器</option> <option value=http://www.tcl.com/03product/vw/index.html> 电视墙</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=11&cateid=1>通讯产品</option> <option value=http://www.tclmobile.com.cn/mobile/product.jsp?catid=77> 手机</option> <option value=03product/pro2.jsp?cateid=11&cateid=18> 电话机</option> <option value=03product/pro2.jsp?cateid=11&cateid=19> 网络设备</option> <option value=03product/pro2.jsp?cateid=11&cateid=293> 宽带产品</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=12&cateid=1>数码产品</option> <option value=http://www.tcl-digital.com/product/family.asp> 家用电脑</option> <option value=http://www.tcl-digital.com/product/business.asp> 商用电脑</option> <option value=http://www.tcl-digital.com/product/notebook.asp> 笔记本电脑</option> <option value=http://www.tcl-digital.com/product/digital.asp> dv产品</option> <option value=http://www.tcl-digital.com/product/digital.asp?cateid=82> mp3播放器</option> <option value=http://www.go-video.com.cn/html/productshow.asp?sortid=25&sortid2=7> mp4播放器</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=13&cateid=1>家电产品</option> <option value=03product/pro2.jsp?cateid=13&cateid=25> 电冰箱</option> <option value=03product/pro2.jsp?cateid=13&cateid=26> 洗衣机</option> <option value=http://www.tclac.com/tclaccn/product/product.aspx> 空调</option> <option value=http://www.tclac.com/tclaccn/product/productlist6.aspx> 中央空调</option> <option value=http://www.nanhaitcl.com/product/productlist1.aspx> 电饭煲</option> <option value=http://www.nanhaitcl.com/product/productlist2.aspx> 电磁炉</option> <option value=http://www.nanhaitcl.com/product/productlist3.aspx> 电风扇</option> <option value=http://www.nanhaitcl.com/product/productlist4.aspx> 饮水机</option> <option value=http://www.nanhaitcl.com/product/productlist5.aspx> 电暖器</option> <option value=http://www.nanhaitcl.com/product/productlist6.aspx> 净水器</option> <option value=http://www.nanhaitcl.com/product/productlist7.aspx> 烧烤炉</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=14&cateid=1>电气产品</option> <option value=http://www.tcl-elc.com/main/gb/product/index.jsp> 开关插座</option> <option value=http://www.tcl-lighting.com/products.asp> 照明产品</option> <option value=http://www.tclelec.com/product/product_ljfl.htm> 工业电器</option> <option value=03product/pro2.jsp?cateid=14&cateid=161> 智能楼宇</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=15&cateid=1>部品产品</option> <option value=http://www.asic.com.cn/cn/product.htm> 集成电路</option> <option value=http://www.tclrf.com/products/index.html> 高频头</option> <option value=http://www.tclbattery.com/china/product01.asp> 电池</option> <option style="background: #999; color: #fff" value=03product/pro2.jsp?cateid=16&cateid=1>文化产品</option> <option value=http://www.meikamusic.com/> 美卡音像</option> <option value=http://www.tcl-disc.com/tp.htm> tcl光盘</option></select>
后来发展到其文字内容可以增、删、编、改，即可以编辑：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>editselect</title> <script> function isie(){ a=navigator.appversion.split(";") b=a[1].split(" ") return parsefloat(b[2]) } if (isie()<5.5) { schtml='<p id="selectcontent" class="selectp" style="visibility:hidden;"><!--<iframe id=selframe frameborder=0 height=100%></iframe>--><p id="selecthtml" class="selectcontent">selectád表</p></p>' } else { schtml='<p id="selectcontent" class="selectp" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><p id="selecthtml" class="selectcontent">selectád表</p></p>' } document.write(schtml) vdiv=selectcontent vdivhtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){ var combo=this; this.options=new array(); this.oj=new array(); this.name=name; this.pname=name+'_p'; 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='<p id='+this.pname+'>' +'<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>' +'</p>' document.write(eshtml) this.sbutton=eval("document.all."+this.buttonname) if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()} this.sbutton.onclick=function(){combo.show()} this.show=function(){ pdiv=eval(combo.pname) 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.length;i++) { vhtml+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innertext;selectcontent.style.visibility=\'hidden\';'+combo.oj[i]+'"><td nowrap>'+combo.options[i] } vhtml+="</table>" vdivhtml.innerhtml=vhtml vtop=pdiv.offsettop+pdiv.offsetheight vleft=pdiv.offsetleft+2 vparent = pdiv.offsetparent; while (vparent.tagname.touppercase() != "body") { vleft += vparent.offsetleft; vtop += vparent.offsettop; vparent = vparent.offsetparent; } 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 } else { if (htmltable.offsetheight>combo.height) { vdiv.style.pixelheight=combo.height vdivhtml.style.pixelheight=combo.height } else { 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) else vdiv.style.left=vleft-1 if (bedge<vdiv.offsetheight) //vdiv.style.top=vtop-vdiv.offsetheight-pdiv.offsetheight vdiv.style.top=vtop-vdiv.offsetheight+bedge else vdiv.style.top=vtop vdivhtml.style.width=parseint(vdiv.style.width) vdiv.style.visibility="visible" } this.add=function(text,js){ combo.options[combo.options.length]=text combo.oj[combo.oj.length]=js } this.clearall=function(){ combo.options=new array() } 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.scrolltop; 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' } } }</script> <style> .selecttext{ border:0px height: 16; font-family:arial; font-size:12px; } .selectbutton{ font-family:webdings; font-size:10px; height: 19; width: 16; border:1px solid #83a5eb; line-height:0px; padding-bottom:3px; background-color:#d1e0fd } .selecttable{ font-family:arial; font-size:12px; cursor:default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectp { position: absolute; width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7f9db9 } </style> </head> <body bgcolor="#83a5eb" background="http://moodboy.com/puterjam/blog/attachments/month_0408/oldr_cs1.jpg"> <table border="0" width="100%"> <tr> <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> </tr> <tr> <td width="151" align="center"><font size="2">长度可以随意修改 可以设置为只读</font></td> <td> <script> var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); sel2.add("这是一个可以编辑的select") sel2.add("支持css") sel2.add("可以通过css，修改外形") sel2.add("作者:舜子制作") sel2.add("msn:puterjam@msn.com") </script> </td> </tr> <tr> <td width="151" align="center"><font size="2">可以遮盖系统select</font></td> <td> <script> var sel3=new editselect("select3","25","可以遮盖系统select","",41); sel3.add("这是一个可以编辑的select") sel3.add("支持css") sel3.add("可以通过css，修改外形") sel3.add("突破原来的select诸多限制") </script> </td> </tr> <tr> <td width="151" align="right"> </td> <td><select><option>系统的select</option></select> </td> </tr> </table> </body> </html>
可编辑的select:
按回车键输入新内容，按del删除选中内容<br> <body bgcolor="#fef4d9" onload="s1.focus();"> <script language="javascript"> <!-- function catch_keydown(sel) { switch(event.keycode) { case 13: //enter; sel.options[sel.length] = new option("","",false,true); event.returnvalue = false; break; case 27: //esc; alert("text:" + sel.options[sel.selectedindex].text + ", value:" + sel.options[sel.selectedindex].value + ";"); event.returnvalue = false; break; case 46: //delete; if(confirm("删除当前选项!?")) { sel.options[sel.selectedindex] = null; if(sel.length>0) { sel.options[0].selected = true; } } event.returnvalue = false; break; case 8: //back space; var s = sel.options[sel.selectedindex].text; sel.options[sel.selectedindex].text = s.substr(0,s.length-1); event.returnvalue = false; break; } } function catch_press(sel) { sel.options[sel.selectedindex].text = sel.options[sel.selectedindex].text + string.fromcharcode(event.keycode); event.returnvalue = false; } //--> </script> <select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
<script language="javascript"> function inputtoselect(text,value) { i=0; while(document.all.sel.options[i]) { if(document.all.sel.options[i].text == text) return 0; i++; } var ooption = document.createelement("option"); ooption.text=text; ooption.value=value; document.all.sel.add(ooption); } </script> <input name="inputx" value="请选择或输入相应内容" onclick="if(this.value=='请选择或输入 相应内容'){this.value='';}else{}" style="border-left:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;border- right:0px solid #000000;width:134;height:22px;" autocomplete="off"><span style="width:150;overflow:hidden"> <select id="sel" style="width:150;margin-left:-134;border:1px solid #000000;border-left:0px;height:22px;" onchange="inputx.value=value" onclick="inputtoselect(inputx.value,inputx.value)"> <option value="111111111">111111111</option> <option value="汉字也可以">汉字也可以</option> </select> </span>
为了让select里有更多的图片、css修饰及其他静、动态修饰效果，而select本身优先级别太高，其修饰效果很少且不能满足上述要求，遂涌现出很多模拟的select:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> <!-- .n1 { border-right: 1px none #999999; border-top: 1px solid #999999; border-bottom: 1px solid #dbdbdb; border-left: 1px solid #999999; cursor: default; width:80px } .n2 { background: url(http://www.blueidea.com/bbs/images/oicq.gif) no-repeat center center; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #dbdbdb; border-left: 1px none; width: 18px; cursor: default; } .ss { color: #ffffff; background: #0a246a; } --> </style> <script lanuage="jscript"> function turnit(ss) { if (ss.style.display=="none") {ss.style.display=""; for (var i=1;i<4;i++) { if (eval('t'+i).innertext==text1.value) eval('t'+i).classname='ss' else eval('t'+i).classname='' } } else {ss.style.display="none"; } } function sele(tid) { bb.style.display='none'; text1.value=tid.innertext; } function over(tid) { for (var i=1;i<4;i++) { eval('t'+i).classname='' } tid.classname='ss' if(typeof(prevobj)!='undefined') prevobj.bgcolor=''; prevobj=tid; } function openb() { if (bb.style.display=='') bb.style.display='none' } </script> <style type="text/css"> <!-- table { font-size: 9pt; } --> </style> </head> <body onclick=if(event.srcelement.tagname=='body')bb.style.display='none';> <table width="98" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="98" nowrap> <input name="text1" type="text" size="10" class=n1 readonly value=请选择 onclick=turnit(bb) onselectstart=event.returnvalue=false><input name="submit" type="text" class="n2" value="" readonly onclick=turnit(bb)> </td> </tr> <tr> <td id=bb style=display:none><p id="layer1" style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" class="n1"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb onselectstart=event.returnvalue=false> <tr> <td id=t1 onmouseover =over(this) onclick=sele(this)>选择1</td> </tr> <tr> <td id=t2 onmouseover =over(this) onclick=sele(this)>选择2</td> </tr> <tr> <td id=t3 onmouseover =over(this) onclick=sele(this)>选择3</td> </tr> </table> </p></td> </tr> </table> </body> </html>
<center><sup><font face="隶书" color="blue">上标是不是这个？</font></sup><font size="6" face="华文行楷" color="red">如果要想以其他的文字作为上标该怎么做啊？</font><sub><font face="黑体" color="green"><b><i>下标是不是这个？</b></i></font></sub> <br><br>
下面这两个已达到较高的水准（动态内容）：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>editselect</title> <script> schtml='<p id="selectcontent" class="selectp" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><p id="selecthtml" class="selectcontent">selectáð±í</p></p>' document.write(schtml) vdiv=selectcontent vdivhtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){ var combo=this; this.options=new array(); this.name=name; this.pname=name+'_p'; 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='<p id='+this.pname+'>' +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#ffffff>' +'<textarea type=text class=selecttext cols="'+size+'" rows="1" name='+name+' value="'+defaulttext+'" contenteditable="false" '+readonly+'></textarea><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>' +'</p>' 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.pname) 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.length;i++) { vhtml+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.innerhtml=\'\';var t=document.createelement(\'span\');t.innerhtml=this.innerhtml;document.all.'+combo.name+'.appendchild(t);selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i] } vhtml+="</table>" vdivhtml.innerhtml=vhtml vtop=pdiv.offsettop+pdiv.offsetheight vleft=pdiv.offsetleft+1 vparent = pdiv.offsetparent; while (vparent.tagname.touppercase() != "body") { vleft += vparent.offsetleft; vtop += vparent.offsettop; vparent = vparent.offsetparent; } 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 } else { if (htmltable.offsetheight>combo.height) { vdiv.style.pixelheight=combo.height vdivhtml.style.pixelheight=combo.height } else { 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) else vdiv.style.left=vleft-1 if (bedge<vdiv.offsetheight) //vdiv.style.top=vtop-vdiv.offsetheight-pdiv.offsetheight vdiv.style.top=vtop-vdiv.offsetheight+bedge else 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.scrolltop; 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' } } } </script> <style> .selecttext{ border:0px height: 22; font-family:arial; font-size:14px; overflow:hidden; } .selectbutton{ font-family:webdings; font-size:10px; height: 25; width: 16; border:1px solid #83a5eb; line-height:0px; padding-bottom:1px; background-color:#d1e0fd } .selecttable{ font-family:arial; font-size:12px; cursor:default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectp { position: absolute; width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7f9db9 } </style> </head> <body bgcolor="#83a5eb" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"> <center> <table border="0" width="234"> <tr> <td width="151" align="center"><font size="2">可编辑的select</font></td> <td><script> var sel1=new editselect("select1","25","可编辑的select",""); sel1.add("<marquee behavior=alternate><img src='http://www.blueidea.com/articleimg/bbsimg/icon6.gif' align='absmiddle'> <b><font color=#22ff22>知</font><font color=#ff2222>往</font><font color=#001199>观</font><font color=#00fffa>来</font></b></marquee>") sel1.add("<img src='http://www.blueidea.com/articleimg/bbsimg/icon7.gif' align='absmiddle'> 微风香水") sel1.add("<img src='http://www.blueidea.com/articleimg/bbsimg/icon8.gif' align='absmiddle'> 阳光锈了") sel1.add("<img src='http://www.blueidea.com/articleimg/bbsimg/icon9.gif' align='absmiddle'> <b><font color=#22ff22>观</font><font color=#ff2222>往</font><font color=#001199>知</font><font color=#00fffa>来</font></b>") </script></td> </tr> <tr> <td width="151" align="right"> </td> <td> </td> </tr> </table>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> <!-- .n1 { border-right: 1px none #999999; border-top: 1px solid #999999; border-bottom: 1px solid #dbdbdb; border-left: 1px solid #999999; cursor: default; width:180px } .n2 { background: url(http://www.blueidea.com/bbs/images/newwin.gif) no-repeat center center; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #dbdbdb; border-left: 1px none; width: 18px; cursor: default; } .ss { color: #ffffff; background: #0a246a; } --> </style> <script lanuage="jscript"> function turnit(ss) { if (ss.style.display=="none") {ss.style.display=""; } else {ss.style.display="none"; } } function sele(tid) { bb.style.display='none'; text1.value=tid.innertext; } function over(tid) { for (var i=1;i<4;i++) { eval('t'+i).classname='' } tid.classname='ss' } function out(tid) { if (bb.style.display!='none') tid.classname='' } </script> <style type="text/css"> <!-- table { font-size: 16pt;font-family:华文行楷; } --> </style> </head> <body style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=green,endcolorstr=white);scrollbar-arrow-color: #fc0048; scrollbar-track-color: #242400; scrollbar-base-color: #24b400;"> <table width="198" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="198" nowrap> <input name="text1" type="text" size="20" class=n1 readonly value=这里头别无选择 onclick=turnit(bb) style="color:red;font-family:隶书;font-size:14px;text-align:center;background:yellow;"><input name="submit" type="text" class="n2" value="" readonly onclick=turnit(bb)> </td> </tr> <tr> <td id=bb style=display:none><p id="layer1" style="position:absolute; width:198px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;scrollbar-arrow-color: #fc0048; scrollbar-track-color: #242400; scrollbar-base-color: #24b400;" class="n1" > <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb> <tr> <td id=t1 onmouseover =over(this) onmouseout =out(this) onclick=sele(this) style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=lime,endcolorstr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">金翅擘海</td> </tr> <tr> <td id=t2 onmouseover =over(this) onmouseout =out(this) onclick=sele(this) style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=brown,endcolorstr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle"><b><font color="#22ff22">知</font><font color="#ff2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></b></td> </tr> <tr> <td id=t3 onmouseover =over(this) onmouseout =out(this) onclick=sele(this) style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=darckblue,endcolorstr=white);"><marquee behavior="alternate"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">海阿洛瓦</marquee></td> </tr> <tr> <td id=t1 onmouseover =over(this) onmouseout =out(this) onclick=sele(this) style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=pink,endcolorstr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">蓝色月光</td> </tr> <tr> <td id=t2 onmouseover =over(this) onmouseout =out(this) onclick=sele(this) style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=red,endcolorstr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle"><b><font color="#22ff22">波</font><font color="#ffdd22">希</font><font color="#001199">米</font><font color="#00fffa">亚 </font></b></td> </tr> <tr> <td id=t3 onmouseover =over(this) onmouseout =out(this) onclick=sele(this) style="filter: progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=green,endcolorstr=white);"><marquee behavior="alternate"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">红色黑客</marquee></td> </tr> </table> </p></td> </tr> </table>
可以去掉下拉的小三角,但不可以无边框:
<script> function myjump(myobj){ myurl=myobj.options[myobj.selectedindex].value; window.open(myurl,"newwin","width=300,height=200"); } </script> <center> <select name="menu1" size=3 onchange="myjump(menu1)" style="background-color: #ccccff; color:#0000ff"> <option selected>文字链接</option> <option value="http://www.bineon.com/bbs/">霓虹论坛</option> <option value="http://www.ylqh.com">叶落秋寒</option> </select>
鼠标移过来select自动下拉:
<style> <!-- td{font-size:12px; } body{margin:0px; line-height:20px} a:link { color:#000000; text-decoration:none} a:visited {color:#000000; text-decoration:none} a:hover { color:#ffffff; background-color:#003366; text-decoration:none} a:active {color:#ffffff; text-decoration:none} --> </style> <script language="javascript" type="text/javascript"> <!-- function mm_reloadpage(init) { //reloads the window if nav4 resized if (init==true) with (navigator) {if ((appname=="netscape")&&(parseint(appversion)==4)) { document.mm_pgw=innerwidth; document.mm_pgh=innerheight; onresize=mm_reloadpage; }} else if (innerwidth!=document.mm_pgw || innerheight!=document.mm_pgh) location.reload(); } mm_reloadpage(true); function mm_findobj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); if(!x && d.getelementbyid) x=d.getelementbyid(n); return x; } function mm_showhidelayers() { //v6.0 var i,p,v,obj,args=mm_showhidelayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=mm_findobj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <p id="layer1" style="position:absolute; left:0px; top:0px; width:145px; height:20px; z-index:1; visibility: visible; background-color: #ffffff; layer-background-color: #ffffff; border: 1px none #000000;" onmousemove="mm_showhidelayers('l2','','show')" onmouseout="mm_showhidelayers('l2','','hide')"></p> <p> <select name="select"> <option selected>鼠标移过来自动下拉</option> <option selected>鼠标移过来自动下拉</option> </select> <p id="l2" style="position:absolute; left:0px; top:20px; width:142px; border:1px solid #000;visibility: hidden; height: 80px; z-index: 2;" onmousemove="mm_showhidelayers('l2','','show')" onmouseout="mm_showhidelayers('l2','','hide')" onclick="mm_showhidelayers('l2','','hide')"> <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0"> <tr> <td onmouseover="this.style.backgroundcolor='#003366';this.style.color='#ffffff'" onmouseout="this.style.backgroundcolor='#ffffff';this.style.color='#000000'" onclick="window.open('http://www.blueidea.com')" >蓝色月光</td> </tr> <tr> <td onmouseover="this.style.backgroundcolor='#003366';this.style.color='#ffffff'" onmouseout="this.style.backgroundcolor='#ffffff';this.style.color='#000000'" onclick="window.open('http://www.blueidea.com')" >红色黑客</td> </tr> <tr> <td onmouseover="this.style.backgroundcolor='#003366';this.style.color='#ffffff'" onmouseout="this.style.backgroundcolor='#ffffff';this.style.color='#000000'" onclick="window.open('http://www.blueidea.com')" > <marquee behavior="alternate"><b><font color="#22ff22">知</font><font color="#ff2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></b></marquee> </td> </tr> <tr> <td onmouseover="this.style.backgroundcolor='#003366';this.style.color='#ffffff'" onmouseout="this.style.backgroundcolor='#ffffff';this.style.color='#000000'" onclick="window.open('http://www.blueidea.com')" > <script language="javascript"> var pltspop=null; var pltsoffsetx = 10; var pltsoffsety = 15; var pltspopbg="#ffffee"; var pltspopfg="#111111"; var pltstitle=""; document.write('<p id=pltstiplayer style="display: none;position: absolute; z-index:10001"></p>'); function pltsinits() { document.onmouseover = plts; document.onmousemove = movetomouseloc; } function plts() { var o=event.srcelement; if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; pltspop=o.dypop; if(pltspop!=null&&pltspop!=""&&typeof(pltspop)!="undefined") { pltstiplayer.style.left=-1000; pltstiplayer.style.display=''; var msg=pltspop.replace(/\n/g,"<br>"); msg=msg.replace(/\0x13/g,"<br>"); var re=/\{(.[^\{]*)\}/ig; if(!re.test(msg))pltstitle="sheneyan"; else{ re=/\{(.[^\{]*)\}(.*)/ig; pltstitle=msg.replace(re,"$1")+" "; re=/\{(.[^\{]*)\}/ig; msg=msg.replace(re,""); msg=msg.replace("<br>","");} var attr=(document.location.tostring().tolowercase().indexof("list.asp")>0?"nowrap":""); var content = '<table style="filter:alpha(opacity=80) shadow(color=#bbbbbb,direction=150);" id=tooltiptalbe border=0><tr><td width="100%"><table class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:9pt;">'+ '<tr id=pltspoptop><th height=12 valign=bottom class=header><p id=topleft align=left>↖'+pltstitle+'</p><p id=topright align=right style="display:none">'+pltstitle+'↗</font></th></tr>'+ '<tr><td "+attr+" class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%">'+msg+'</td></tr>'+ '<tr id=pltspopbot style="display:none"><th height=12 valign=bottom class=header><p id=botleft align=left>↙'+pltstitle+'</p><p id=botright align=right style="display:none">'+pltstitle+'↘</font></th></tr>'+ '</table></td></tr></table>'; pltstiplayer.innerhtml=content; tooltiptalbe.style.width=math.min(pltstiplayer.clientwidth,document.body.clientwidth/2.2); movetomouseloc(); return true; } else { pltstiplayer.innerhtml=''; pltstiplayer.style.display='none'; return true; } } function movetomouseloc() { if(pltstiplayer.innerhtml=='')return true; var mousex=event.x; var mousey=event.y; //window.status=event.y; var popheight=pltstiplayer.clientheight; var popwidth=pltstiplayer.clientwidth; if(mousey+pltsoffsety+popheight>document.body.clientheight) { poptopadjust=-popheight-pltsoffsety*1.5; pltspoptop.style.display="none"; pltspopbot.style.display=""; } else { poptopadjust=0; pltspoptop.style.display=""; pltspopbot.style.display="none"; } if(mousex+pltsoffsetx+popwidth>document.body.clientwidth) { popleftadjust=-popwidth-pltsoffsetx*2; topleft.style.display="none"; botleft.style.display="none"; topright.style.display=""; botright.style.display=""; } else { popleftadjust=0; topleft.style.display=""; botleft.style.display=""; topright.style.display="none"; botright.style.display="none"; } pltstiplayer.style.left=mousex+pltsoffsetx+document.body.scrollleft+popleftadjust; pltstiplayer.style.top=mousey+pltsoffsety+document.body.scrolltop+poptopadjust; return true; } pltsinits(); </script> <img border="0" alt="<img border='0' src='http://pic1.blueidea.com/bbs/icon7.gif'>" src="http://www.blueidea.com/articleimg/usericon/sheneyan.gif">