select发展史超强

　　作者：marvellous

　　本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。

　　最初的select的确很平淡,就是一个下拉选项列表:

　　日久天长之后,人们对select要求高了,要修一修边幅:

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Ai%3D1%3B%20%0D%0A%3C%2Fscript%3E"> 
<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>

<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; 
} 
.seldiv{ 
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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0Adocument.onclick%3DhiddenDiv%3B%20%0D%0Afunction%20getDivCount()%20%7B%20%0D%0A%20var%20arr%3Ddocument.all%3B%20%20%0D%0A%20re%3D0%3B%20%0D%0A%20for%20(i%3D0%3Bi%3Carr.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20str%3Darr%5Bi%5D.id%3B%20%20%20%0D%0A%20%20if%20(str.indexOf(%22ZfDiv_%22)%3D%3D0)%20%7B%20%20%20%20%0D%0A%20%20%20re%2B%2B%3B%20%20%20%0D%0A%20%20%7D%20%0D%0A%20%7D%20%20%0D%0A%20return%20re%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20getI(ObjId)%20%7B%2F%2F%E5%8F%96%E5%BE%97objId%E7%9A%84%E6%9C%80%E5%90%8E%E4%B8%80%E4%BD%8D%E6%95%B0%E5%AD%97%20%0D%0A%20for%20(i%3D0%3Bi%3CObjId.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20if%20(ObjId.charAt(i)%3D%3D%22_%22)%20return%20ObjId.substr(i%2B1%2CObjId.length-1)%3B%20%0D%0A%20%7D%20%0D%0A%20return%200%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20select_edit(TextObj)%7B%2F%2F%E9%BC%A0%E6%A0%87%E7%BB%8F%E8%BF%87%E9%AB%98%E4%BA%AE%E5%BA%A6%20%20%0D%0A%20TextObj.focus()%3BTextObj.select()%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20checkValue(ID)%7B%20%20%20%20%0D%0A%20var%20sl%3Ddocument.all%5B%22ZfText_%22%2BID%5D%3B%20%20%0D%0A%20var%20sv%3Ddocument.all%5B%22ZfDiv_%22%2BID%5D%3B%20%0D%0A%20var%20da%3Ddocument.all%5B%22ZfData_%22%2BID%5D%3B%20%20%20%20%0D%0A%20sv.style.display%3D''%20%0D%0A%20%20%0D%0A%20for(i%3D0%3Bi%3Cda.rows.length%3Bi%2B%2B)da.rows%5Bi%5D.style.display%3D''%20%0D%0A%20%20%0D%0A%20for(i%3D0%3Bi%3Cda.rows.length%3Bi%2B%2B)%7B%20%0D%0A%20%20if(da.rows%5Bi%5D.cells%5B0%5D.innerText.indexOf(sl.value)!%3D0)da.rows%5Bi%5D.style.display%3D'none'%3B%20%0D%0A%20%20getPosition(ID)%3B%20%0D%0A%20%7D%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20getL(e)%7B%20%0D%0A%20var%20l%3De.offsetLeft%3B%20%0D%0A%20while(e%3De.offsetParent)%7B%20%0D%0A%20%20l%2B%3De.offsetLeft%3B%20%0D%0A%20%7D%20%0D%0A%20return%20l%20%0D%0A%7D%20%0D%0Afunction%20getT(e)%7B%20%0D%0A%20var%20t%3De.offsetTop%3B%20%0D%0A%20while(e%3De.offsetParent)%7B%20%0D%0A%20%20t%2B%3De.offsetTop%3B%20%0D%0A%20%7D%20%0D%0A%20return%20t%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20getPosition(ID)%7B%20%20%0D%0A%20var%20sv%3Ddocument.all%5B%22ZfDiv_%22%2BID%5D%3B%20%0D%0A%20var%20sl%3Ddocument.all%5B%22ZfText_%22%2BID%5D%3B%20%0D%0A%20var%20spn%3Ddocument.all%5B%22ZfSpan_%22%2BID%5D%3B%20%0D%0A%20var%20da%3Ddocument.getElementById(%22ZfData_%22%2BID)%3B%20%0D%0A%20sv.style.pixelWidth%3Dspn.offsetWidth%3B%20%0D%0A%20da.style.pixelWidth%3Dsv.offsetWidth%3B%20%0D%0A%20sv.style.pixelLeft%3DgetL(spn)%3B%20%0D%0A%20sv.style.pixelTop%3DgetT(spn)%2Bsl.offsetHeight%2B3%3B%20%0D%0A%20if(da.offsetHeight%3E200)%7B%20%0D%0A%20%20sv.style.pixelHeight%3D200%3B%20%0D%0A%20%20sv.style.overflowY%3D'scroll'%3B%20%0D%0A%20%7D%20%0D%0A%20else%20%7B%20%0D%0A%20%20sv.style.pixelHeight%3Dda.offsetHeight%3B%20%0D%0A%20%20sv.style.overflowY%3D'hidden'%3B%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20dropDown(ID)%7B%20%20%0D%0A%20var%20sv%3Ddocument.all%5B%22ZfDiv_%22%2BID%5D%20%0D%0A%20var%20tb%3Ddocument.all%5B%22ZfData_%22%2BID%5D%20%0D%0A%20%20%0D%0A%20if(sv.style.display%3D%3D'none')%7B%20%20%20%0D%0A%20%20sv.style.display%3D''%3B%20%20%20%0D%0A%20%20for(i%3D0%3Bi%3Ctb.rows.length%3Bi%2B%2B)tb.rows%5Bi%5D.style.display%3D''%20%0D%0A%20%20getPosition(ID)%3B%20%20%20%0D%0A%20%7D%20else%20%7B%20%20%20%0D%0A%20%20sv.style.display%3D'none'%3B%20%0D%0A%20%7D%20%0D%0A%7D%2F%2F%E4%B8%8B%E6%8B%89%E6%91%B8%E6%8B%9F%E5%B1%82%20%0D%0A%0D%0Afunction%20hiddenDiv()%7B%20%0D%0A%20var%20o%3Dwindow.event.srcElement.id%3B%20%0D%0A%20var%20tb%20%20%0D%0A%20var%20sv%20%20%0D%0A%20if(o%3D%3D%22%22)%20%7B%20%0D%0A%20%20for%20(j%3D0%3Bj%3CgetDivCount()%3Bj%2B%2B)%20%7B%20%0D%0A%20%20%20tb%3Ddocument.getElementById('ZfData_'%2Bj)%3B%20%0D%0A%20%20%20sv%3Ddocument.getElementById('ZfDiv_'%2Bj)%3B%20%20%20%20%0D%0A%20%20%20for(i%3D0%3Bi%3Ctb.rows.length%3Bi%2B%2B)%20tb.rows%5Bi%5D.style.display%3D''%3B%20%0D%0A%20%20%20sv.style.display%3D'none'%3B%20%20%20%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%7D%20%0D%0A%0D%0A%7D%2F%2F%E9%9A%90%E8%97%8F%E6%A8%A1%E6%8B%9F%E5%B1%82%20%0D%0A%0D%0A%0D%0Afunction%20setValue(obj)%7B%20%0D%0Avar%20i%3DgetI(obj.parentElement.parentElement.parentElement.id)%3B%20%0D%0A%2F%2Falert(obj.parentElement.parentElement.parentElement.id)%3B%20%0D%0A%0D%0Avar%20sl%3Ddocument.all%5B%22ZfText_%22%2Bi%5D%3B%20%0D%0Avar%20sv%3Ddocument.all%5B'ZfDiv_'%2Bi%5D%3B%20%0D%0Asl.value%3Dobj.innerText%3B%20%0D%0Asv.style.display%3D'none'%3B%20%0D%0A%2F%2FsldIndex%3Dobj.parentElement.rowIndex%3B%20%0D%0A%7D%2F%2F%E7%BB%99%E6%96%87%E6%9C%AC%E6%A1%86%E8%B5%8B%E5%80%BC%20%0D%0A%0D%0Afunction%20over(obj)%7B%20%0D%0A%20obj.className%3D%22td_over%22%20%0D%0A%20obj.title%3Dobj.innerText%20%0D%0A%20obj.focus()%3B%20%0D%0A%7D%2F%2F%E9%BC%A0%E6%A0%87%E7%BB%8F%E8%BF%87%E5%8F%98%E8%89%B2%20%0D%0A%0D%0Afunction%20out(obj)%7B%20%0D%0A%20obj.className%3D%22td_out%22%20%0D%0A%7D%2F%2F%E9%BC%A0%E6%A0%87%E7%A6%BB%E5%BC%80%E8%BF%98%E5%8E%9F%20%0D%0A%0D%0Afunction%20String.prototype.Trim()%7Breturn%20this.replace(%2F(%5E%5Cs*)%7C(%5Cs*%24)%2Fg%2C'')%7D%2F%2F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8E%BB%E7%A9%BA%E6%A0%BC%E5%87%BD%E6%95%B0Trim()%20%0D%0A%0D%0A%0D%0A%2F%2F%E5%A2%9E%E5%8A%A0list%E7%9A%84%E6%8E%A5%E5%8F%A3%2CID%E8%A1%A8%E7%A4%BA%E8%AF%A5%E7%BB%84%E6%8E%A7%E4%BB%B6%E6%98%AF%E9%A1%B5%E9%9D%A2%E4%B8%AD%E7%9A%84%E7%AC%AC%E5%87%A0%E4%B8%AA%20%0D%0Afunction%20add(v%2CID)%7B%20%0D%0Avar%20sv%3Ddocument.all%5B'ZfDiv_'%2BID%5D%3B%20%0D%0Aif(!v.Trim())%7Breturn%3B%7D%20%0D%0Avar%20tb%3Ddocument.all%5B'ZfData_'%2BID%5D%3B%20%0D%0Avar%20c%3Dtb.insertRow(tb.rows.length).insertCell()%3B%20%0D%0Ac.innerHTML%3D'%3Cnobr%3E'%2Bv.Trim()%2B'%3C%2Fnobr%3E'%3B%20%0D%0Ac.onmouseover%3Dnew%20Function(%22over(this)%22)%3B%20%0D%0Ac.onmouseout%3Dnew%20Function(%22out(this)%22)%3B%20%0D%0Ac.onclick%3Dnew%20Function(%22setValue(this)%22)%3B%20%0D%0Ac.className%3D%22td_out%22%3B%20%0D%0Av%3D''%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%A2%9E%E5%8A%A0inpnubox%E7%9A%84%E6%8E%A5%E5%8F%A3%2C%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B8%AD%E4%BA%A7%E7%94%9F%E4%B8%80%E4%B8%AAinputbox%E6%8E%A7%E4%BB%B6%2C%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E4%B8%BA%E7%A9%BA%20%0D%0Afunction%20addText(name%2CDefValue)%20%7B%20%0D%0A%20var%20i%3DgetDivCount()%3B%20%0D%0A%20document.write('%3Cspan%20id%3D%22ZfSpan_'%2Bi%2B'%22%20style%3D%22border%3A1%20solid%20%239CA0CB%22%3E')%3B%20%0D%0A%20document.write('%3Cinput%20type%3D%22text%22%20value%3D%22'%2BDefValue%2B'%22%20name%3D%22'%2Bname%2B'%22%20id%3D%22ZfText_'%2Bi%2B'%22%20ondblclick%3D%22ZfDrop_'%2Bi%2B'.click()%22%20class%3D%22slv%22%20onmouseover%3D%22select_edit(this)%22%20%20onkeyup%3D%22checkValue('%2Bi%2B')%22%3E%3Cinput%20type%3Dbutton%20id%3D%22ZfDrop_'%2Bi%2B'%22%20value%3D%22%3E%22%20onclick%3D%22this.hideFocus%3Dtrue%3BdropDown('%2Bi%2B')%3B%22%20class%3D%22down%22%20onmouseover%3D%22this.style.backgroundColor%3D%23EEF3FD%22%20onmouseout%3D%22this.style.backgroundColor%3D%5C'%5C'%22%20onmousedown%3D%22this.style.backgroundColor%3D%23ABC4F5%22%20onmouseup%3D%22this.style.backgroundColor%3D%5C'%5C'%22%3E%3C%2Fspan%3E')%3B%20%0D%0A%20document.write('%3Cdiv%20id%3D%22ZfDiv_'%2Bi%2B'%22%20class%3D%22seldiv%22%20style%3D%22display%3Anone%3B%22%3E%3Ctable%20id%3D%22ZfData_'%2Bi%2B'%22%20onselectstart%3D%22return%20false%22%20border%3D%220%22%20%20cellspacing%3D%220%22%20cellpadding%3D%220%22%20class%3D%22table1%22%3E%3C%2Ftable%3E%3C%2Fdiv%3E')%3B%20%0D%0A%7D%20%0D%0A%0D%0A%20%20%0D%0A%0D%0A%3C%2Fscript%3E"> 
</head> 
<body>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　要加一些链接,变成菜单:

<STYLE> 
body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)} 
</STYLE>

<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>

<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>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<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>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　后来发展到其文字内容可以增、删、编、改，即可以编辑：

<html>

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>EditSelect</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20isIE()%7B%20%0D%0Aa%3Dnavigator.appVersion.split(%22%3B%22)%20%0D%0Ab%3Da%5B1%5D.split(%22%20%22)%20%0D%0Areturn%20parseFloat(b%5B2%5D)%20%0D%0A%7D%20%0D%0A%0D%0Aif%20(isIE()%3C5.5)%20%20%0D%0A%7B%20%0D%0A%20%20%20%20%20scHTML%3D'%3Cdiv%20id%3D%22selectcontent%22%20class%3D%22selectdiv%22%20style%3D%22visibility%3Ahidden%3B%22%3E%3C!--%3Ciframe%20id%3Dselframe%20frameborder%3D0%20height%3D100%25%3E%3C%2Fiframe%3E--%3E%3Cdiv%20id%3D%22selecthtml%22%20class%3D%22selectcontent%22%3Eselect%26%23225%3BD%E8%A1%A8%3C%2Fdiv%3E%3C%2Fdiv%3E'%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0A%20%20%20%20%20scHTML%3D'%3Cdiv%20id%3D%22selectcontent%22%20class%3D%22selectdiv%22%20style%3D%22visibility%3Ahidden%3B%22%3E%3Ciframe%20id%3Dselframe%20frameborder%3D0%20height%3D100%25%3E%3C%2Fiframe%3E%3Cdiv%20id%3D%22selecthtml%22%20class%3D%22selectcontent%22%3Eselect%26%23225%3BD%E8%A1%A8%3C%2Fdiv%3E%3C%2Fdiv%3E'%20%0D%0A%7D%20%0D%0A%0D%0Adocument.write(scHTML)%20%0D%0AvDiv%3Dselectcontent%20%0D%0AvDivHtml%3Dselecthtml%20%0D%0A%0D%0Afunction%20editselect(name%2Csize%2Cdefaulttext%2Cwidth%2Cheight%2Creadonly)%7B%20%0D%0A%20%20var%20combo%3Dthis%3B%20%0D%0A%20%20this.options%3Dnew%20Array()%3B%20%0D%0A%20%20this.oj%3Dnew%20Array()%3B%20%0D%0A%20%20this.name%3Dname%3B%20%0D%0A%20%20this.divname%3Dname%2B'_div'%3B%20%0D%0A%20%20this.buttonname%3Dname%2B'_button'%3B%20%0D%0A%20%20this.tablename%3Dname%2B'_table'%3B%20%0D%0A%20%20this.htmltable%3Dname%2B'_html'%20%0D%0A%20%20if%20(!height)%20this.height%3D0%3B%20else%20this.height%3Dheight%20%0D%0A%20%20if%20(width)%20this.width%3Dwidth%20%0D%0A%20%20if%20(!size)%20size%3D8%20%0D%0A%20%20if%20(!defaulttext)%20defaulttext%3D%22%22%20%0D%0A%20%20if%20(!readonly%20%7C%7C%20readonly%3D%3D0)%20%7Breadonly%3D%22%22%20%7Delse%20%7Bif%20(readonly%3D%3D1)%20readonly%3D%22readonly%20style%3Dcursor%3Adefault%22%3Bthis.readonly%3D1%7D%20%0D%0A%20%20%20%0D%0A%20%20esHTML%3D'%3Cdiv%20id%3D'%2Bthis.divname%2B'%3E'%20%0D%0A%20%20%20%20%20%20%20%20%20%2B'%3Ctable%20id%3D'%2Bthis.tablename%2B'%20cellpadding%3D0%20cellspacing%3D0%20class%3Dselect%3E%3Ctr%3E%3Ctd%20bgcolor%3D%23FFFFFF%3E'%20%0D%0A%20%20%20%20%20%20%20%20%20%2B'%3Cinput%20type%3Dtext%20class%3Dselecttext%20size%3D%22'%2Bsize%2B'%22%20name%3D'%2Bname%2B'%20value%3D%22'%2Bdefaulttext%2B'%22%20'%2Breadonly%2B'%3E%3Ctd%3E%3Cbutton%20class%3Dselectbutton%20id%3D'%2Bthis.buttonname%2B'%3E6%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E'%20%0D%0A%20%20%20%20%20%20%20%20%20%2B'%3C%2Fdiv%3E'%20%0D%0A%20%20document.write(esHTML)%20%0D%0A%20%20this.sbutton%3Deval(%22document.all.%22%2Bthis.buttonname)%20%0D%0A%20%20%20%0D%0A%20%20if%20(this.readonly%3D%3D1)%20eval(%22document.all.%22%2Bthis.name).onclick%3Dfunction()%7Bcombo.show()%7D%20%20%20%0D%0A%20%20%20%0D%0A%20%20this.sbutton.onclick%3Dfunction()%7Bcombo.show()%7D%20%0D%0A%20%20this.show%3Dfunction()%7B%20%0D%0A%20%20%20%20pDiv%3Deval(combo.divname)%20%0D%0A%20%20%20%20pTable%3Deval(combo.tablename)%20%0D%0A%20%20%20%20var%20vHTML%3D'%3Ctable%20id%3Dhtmltable%20cellspacing%3D%220%22%20cellpadding%3D%222%22%20bgcolor%3D%22%23ffffff%22%20class%3D%22selecttable%22%20width%3D100%25%3E'%20%0D%0A%20%20%20%20for%20(i%3D0%3Bi%3Ccombo.options.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20vHTML%2B%3D'%3Ctr%20onmouseover%3D%22mo(this)%22%20onmouseout%3D%22mu(this)%22%20onclick%3D%22document.all.'%2Bcombo.name%2B'.value%3Dthis.innerText%3Bselectcontent.style.visibility%3D%5C'hidden%5C'%3B'%2Bcombo.oj%5Bi%5D%2B'%22%3E%3Ctd%20nowrap%3E'%2Bcombo.options%5Bi%5D%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20vHTML%2B%3D%22%3C%2Ftable%3E%22%20%0D%0A%20%20%20%20vDivHtml.innerHTML%3DvHTML%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vtop%3DpDiv.offsetTop%2BpDiv.offsetHeight%20%0D%0A%20%20%20%20vleft%3DpDiv.offsetLeft%2B2%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vParent%20%3D%20pDiv.offsetParent%3B%20%0D%0A%20%20%20%20%20while%20(vParent.tagName.toUpperCase()%20!%3D%20%22BODY%22)%20%0D%0A%20%7B%20%0D%0A%20%20vleft%20%2B%3D%20vParent.offsetLeft%3B%20%0D%0A%20%20vtop%20%2B%3D%20vParent.offsetTop%3B%20%0D%0A%20%20vParent%20%3D%20vParent.offsetParent%3B%20%0D%0A%20%7D%20%0D%0A%0D%0A%20%20%20var%20redge%3Ddocument.body.clientWidth-vleft%20%0D%0A%20%20%20var%20bedge%3Ddocument.body.clientHeight-vtop%20%0D%0A%20%20%0D%0A%20%20%20%20%0D%0A%0D%0A%20if%20(!combo.width)%20%7BvDiv.style.width%3DpTable.offsetWidth%7D%20else%20%7BvDiv.style.width%3Dcombo.width%7D%20%0D%0A%20%20%20%20%20%0D%0A%0D%0A%20%20%20%20if%20(combo.height%3D%3D0)%20%0D%0A%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20vDiv.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%20%20vDivHtml.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20if%20(htmltable.offsetHeight%3Ecombo.height)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20vDiv.style.pixelHeight%3Dcombo.height%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20vDivHtml.style.pixelHeight%3Dcombo.height%20%0D%0A%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20else%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20vDiv.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20vDivHtml.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vDivHtml.scrollTop%3D0%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20if%20(redge%3CvDiv.offsetWidth)%20%0D%0A%20%20%20%20%20%20vDiv.style.left%3Dvleft-1-(vDiv.offsetWidth-redge)%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20vDiv.style.left%3Dvleft-1%20%0D%0A%20%20%20%20%20%20%20%0D%0A%0D%0A%20%20%20if%20(bedge%3CvDiv.offsetHeight)%20%0D%0A%20%20%20%20%2F%2FvDiv.style.top%3Dvtop-vDiv.offsetHeight-pDiv.offsetHeight%20%0D%0A%20%20%20%20vDiv.style.top%3Dvtop-vDiv.offsetHeight%2Bbedge%20%0D%0A%20%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20vDiv.style.top%3Dvtop%20%0D%0A%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vDivHtml.style.width%3DparseInt(vDiv.style.width)%20%0D%0A%20%20%20%20%20%20vDiv.style.visibility%3D%22visible%22%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20this.add%3Dfunction(text%2Cjs)%7B%20%0D%0A%20%20%20%20%20combo.options%5Bcombo.options.length%5D%3Dtext%20%0D%0A%20%20%20%20%20combo.oj%5Bcombo.oj.length%5D%3Djs%20%0D%0A%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20this.clearall%3Dfunction()%7B%20%0D%0A%20%20combo.options%3Dnew%20Array()%20%0D%0A%20%20%7D%20%0D%0A%0D%0A%20%20this.about%3Dfunction()%7B%20%0D%0A%20%20%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20mo(obj)%7B%20%0D%0Aobj.style.backgroundColor%3D%22%23000099%22%20%0D%0Aobj.style.color%3D%22%23ffffff%22%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20mu(obj)%7B%20%0D%0Aobj.style.backgroundColor%3D%22%22%20%0D%0Aobj.style.color%3D%22%23000000%22%20%0D%0A%7D%20%0D%0A%0D%0Adocument.onmousedown%3Dfunction()%7B%20%0D%0Aif%20(vDiv.style.visibility%3D%3D%22visible%22)%7B%20%0D%0Amx%3Devent.x%20%2B%20document.body.scrollLeft%20%0D%0Amy%3Devent.y%20%2B%20document.body.scrollTop%3B%20%0D%0A%0D%0Ax1%3DvDiv.offsetLeft%20%0D%0Ay1%3DvDiv.offsetTop%20%0D%0A%0D%0Ax2%3DvDiv.offsetLeft%2BvDiv.offsetWidth%20%0D%0Ay2%3DvDiv.offsetTop%2BvDiv.offsetHeight%20%0D%0A%0D%0Aif%20(mx%3Cx1%20%7C%7C%20my%3Cy1%20%7C%7C%20x2%3Cmx%20%7C%7C%20y2%3Cmy)%20%20%0D%0A%20%20%20%7B%20%20%0D%0A%20%20%20%20%20vDiv.style.visibility%3D'hidden'%20%0D%0A%20%20%20%7D%20%0D%0A%7D%20%0D%0A%7D%3C%2Fscript%3E">

.selectdiv 
{ 
position: absolute;  
width:100; 
overflow:hidden; 
} 
.select{ 
border-collapse: collapse; 
border:1px solid #7F9DB9 
} 
</style> 
</head>

<table border="0" width="100%"> 
 <tr> 
  <td width="151" align="center"><font size="2">可编辑的Select</font></td> 
  <td><img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20sel1%3Dnew%20editselect(%22select1%22%2C%2225%22%2C%22%E5%8F%AF%E7%BC%96%E8%BE%91%E7%9A%84Select%22%2C%22%22)%3B%20%0D%0Asel1.add(%22%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%A5%E7%BC%96%E8%BE%91%E7%9A%84Select%22)%20%0D%0Asel1.add(%22%E6%94%AF%E6%8C%81CSS%22)%20%0D%0Asel1.add(%22%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87CSS%EF%BC%8C%E4%BF%AE%E6%94%B9%E5%A4%96%E5%BD%A2%22)%20%0D%0Asel1.add(%22%E7%AA%81%E7%A0%B4%E5%8E%9F%E6%9D%A5%E7%9A%84Select%E8%AF%B8%E5%A4%9A%E9%99%90%E5%88%B6%22)%20%0D%0A%3C%2Fscript%3E"></td> 
 </tr> 
 <tr> 
  <td width="151" align="center"><font size="2">长度可以随意修改 
可以设置为只读</font></td> 
  <td> 
  <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20sel2%3Dnew%20editselect(%22select2%22%2C%2220%22%2C%22%E9%95%BF%E5%BA%A6%E5%8F%AF%E4%BB%A5%E9%9A%8F%E6%84%8F%E4%BF%AE%E6%94%B9%22%2C250%2C82%2C1)%3B%20%0D%0Asel2.add(%22%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%A5%E7%BC%96%E8%BE%91%E7%9A%84Select%22)%20%0D%0Asel2.add(%22%E6%94%AF%E6%8C%81CSS%22)%20%0D%0Asel2.add(%22%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87CSS%EF%BC%8C%E4%BF%AE%E6%94%B9%E5%A4%96%E5%BD%A2%22)%20%0D%0A%0D%0Asel2.add(%22%E4%BD%9C%E8%80%85%3A%E8%88%9C%E5%AD%90%E5%88%B6%E4%BD%9C%22)%20%0D%0Asel2.add(%22MSN%3Aputerjam%40msn.com%22)%20%0D%0A%3C%2Fscript%3E"> 
  </td> 
 </tr> 
 <tr> 
  <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td> 
  <td> 
  <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20sel3%3Dnew%20editselect(%22select3%22%2C%2225%22%2C%22%E5%8F%AF%E4%BB%A5%E9%81%AE%E7%9B%96%E7%B3%BB%E7%BB%9FSelect%22%2C%22%22%2C41)%3B%20%0D%0Asel3.add(%22%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%A5%E7%BC%96%E8%BE%91%E7%9A%84Select%22)%20%0D%0Asel3.add(%22%E6%94%AF%E6%8C%81CSS%22)%20%0D%0Asel3.add(%22%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87CSS%EF%BC%8C%E4%BF%AE%E6%94%B9%E5%A4%96%E5%BD%A2%22)%20%0D%0Asel3.add(%22%E7%AA%81%E7%A0%B4%E5%8E%9F%E6%9D%A5%E7%9A%84Select%E8%AF%B8%E5%A4%9A%E9%99%90%E5%88%B6%22)%20%0D%0A%3C%2Fscript%3E"> 
  </td> 
 </tr> 
 <tr> 
  <td width="151" align="right">　</td> 
  <td><select><option>系统的Select</option></select>　</td> 
 </tr> 
</table> 
</body>

</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　接续上文

　　可编辑的select:

按回车键输入新内容，按DEL删除选中内容
 
<body bgcolor="#fef4d9" onload="s1.focus();"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0Afunction%20catch_keydown(sel)%20%0D%0A%7B%20%0D%0A%20%20%20%20switch(event.keyCode)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20case%2013%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FEnter%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sel.options%5Bsel.length%5D%20%3D%20new%20Option(%22%22%2C%22%22%2Cfalse%2Ctrue)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20event.returnValue%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%2027%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FEsc%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20alert(%22text%3A%22%20%2B%20sel.options%5Bsel.selectedIndex%5D.text%20%2B%20%22%2C%20value%3A%22%20%2B%20sel.options%5Bsel.selectedIndex%5D.value%20%2B%20%22%3B%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20event.returnValue%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%2046%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FDelete%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(confirm(%22%E5%88%A0%E9%99%A4%E5%BD%93%E5%89%8D%E9%80%89%E9%A1%B9!%3F%22))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sel.options%5Bsel.selectedIndex%5D%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(sel.length%3E0)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sel.options%5B0%5D.selected%20%3D%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20event.returnValue%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20case%208%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FBack%20Space%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20s%20%3D%20sel.options%5Bsel.selectedIndex%5D.text%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sel.options%5Bsel.selectedIndex%5D.text%20%3D%20s.substr(0%2Cs.length-1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20event.returnValue%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0Afunction%20catch_press(sel)%20%0D%0A%7B%20%0D%0A%20%20%20%20sel.options%5Bsel.selectedIndex%5D.text%20%3D%20sel.options%5Bsel.selectedIndex%5D.text%20%2B%20String.fromCharCode(event.keyCode)%3B%20%0D%0A%20%20%20%20event.returnValue%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> 
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<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>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　为了让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"> 
 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20%20lanuage%3D%22JScript%22%3E%20%0D%0Afunction%20%20turnit(ss)%20%0D%0A%7B%20%0D%0A%0D%0A%20%20if%20%20(ss.style.display%3D%3D%22none%22)%20%20%20%0D%0A%20%20%20%20%7Bss.style.display%3D%22%22%3B%20%0D%0A%20%20%20%20for%20(var%20i%3D1%3Bi%3C4%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aif%20(eval('t'%2Bi).innerText%3D%3Dtext1.value)%20%0D%0Aeval('t'%2Bi).className%3D'ss'%20%0D%0Aelse%20%0D%0Aeval('t'%2Bi).className%3D''%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%20%20else%20%0D%0A%20%20%20%20%7Bss.style.display%3D%22none%22%3B%20%20%20%20%0D%0A%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20sele(tid)%20%0D%0A%7B%20%0D%0Abb.style.display%3D'none'%3B%20%0D%0Atext1.value%3Dtid.innerText%3B%20%0D%0A%7D%20%0D%0Afunction%20over(tid)%20%0D%0A%7B%20%0D%0Afor%20(var%20i%3D1%3Bi%3C4%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aeval('t'%2Bi).className%3D''%20%0D%0A%7D%20%0D%0Atid.className%3D'ss'%20%0D%0Aif(typeof(prevObj)!%3D'undefined')%20%0D%0AprevObj.bgColor%3D''%3B%20%0D%0AprevObj%3Dtid%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20openb()%20%0D%0A%7B%20%0D%0Aif%20(bb.style.display%3D%3D'')%20%0D%0Abb.style.display%3D'none'%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
 
</style> 
</head>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<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>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　下面这两个已达到较高的水准（动态内容）：

<html>

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>EditSelect</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0AscHTML%3D'%3Cdiv%20id%3D%22selectcontent%22%20class%3D%22selectdiv%22%20style%3D%22visibility%3Ahidden%3B%22%3E%3Ciframe%20id%3Dselframe%20frameborder%3D0%20height%3D100%25%3E%3C%2Fiframe%3E%3Cdiv%20id%3D%22selecthtml%22%20class%3D%22selectcontent%22%3Eselect%26Aacute%3B%26ETH%3B%26%23177%3B%26%23237%3B%3C%2Fdiv%3E%3C%2Fdiv%3E'%20%0D%0Adocument.write(scHTML)%20%0D%0AvDiv%3Dselectcontent%20%0D%0AvDivHtml%3Dselecthtml%20%0D%0A%0D%0Afunction%20editselect(name%2Csize%2Cdefaulttext%2Cwidth%2Cheight%2Creadonly)%7B%20%0D%0A%20%20var%20combo%3Dthis%3B%20%0D%0A%20%20this.options%3Dnew%20Array()%3B%20%0D%0A%20%20this.name%3Dname%3B%20%0D%0A%20%20this.divname%3Dname%2B'_div'%3B%20%0D%0A%20%20this.buttonname%3Dname%2B'_button'%3B%20%0D%0A%20%20this.tablename%3Dname%2B'_table'%3B%20%0D%0A%20%20this.htmltable%3Dname%2B'_html'%20%0D%0A%20%20%20%0D%0A%20%20if%20(!height)%20this.height%3D0%3B%20else%20this.height%3Dheight%20%0D%0A%20%20if%20(width)%20this.width%3Dwidth%20%0D%0A%20%20if%20(!size)%20size%3D8%20%0D%0A%20%20if%20(!defaulttext)%20defaulttext%3D%22%22%20%0D%0A%20%20if%20(!readonly%20%7C%7C%20readonly%3D%3D0)%20%7Breadonly%3D%22%22%20%7Delse%20%7Bif%20(readonly%3D%3D1)%20readonly%3D%22readonly%20style%3Dcursor%3Adefault%22%3Bthis.readonly%3D1%7D%20%0D%0A%20%20%20%0D%0A%20%20esHTML%3D'%3Cdiv%20id%3D'%2Bthis.divname%2B'%3E'%20%0D%0A%20%20%20%20%20%20%20%20%20%2B'%3Ctable%20id%3D'%2Bthis.tablename%2B'%20cellpadding%3D0%20cellspacing%3D0%20class%3Dselect%3E%3Ctr%3E%3Ctd%20bgcolor%3D%23FFFFFF%3E'%20%0D%0A%20%20%20%20%20%20%20%20%20%2B'%3Ctextarea%20type%3Dtext%20class%3Dselecttext%20cols%3D%22'%2Bsize%2B'%22%20rows%3D%221%22%20name%3D'%2Bname%2B'%20value%3D%22'%2Bdefaulttext%2B'%22%20contenteditable%3D%22false%22%20'%2Breadonly%2B'%3E%3C%26%2347textarea%3E%3Ctd%3E%3Cbutton%20class%3Dselectbutton%20id%3D'%2Bthis.buttonname%2B'%3E6%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E'%20%0D%0A%20%20%20%20%20%20%20%20%20%2B'%3C%2Fdiv%3E'%20%0D%0A%20%20document.write(esHTML)%20%0D%0A%20%20this.sbutton%3Deval(%22document.all.%22%2Bthis.buttonname)%20%0D%0A%20%20%20%0D%0A%20%20if%20(this.readonly%3D%3D1)%20eval(this.name).onclick%3Dfunction()%7Bcombo.show()%7D%20%0D%0A%20%20%20%0D%0A%20%20this.sbutton.onclick%3Dfunction()%7Bcombo.show()%7D%20%0D%0A%20%20this.show%3Dfunction()%7B%20%0D%0A%20%20%20%20pDiv%3Deval(combo.divname)%20%0D%0A%20%20%20%20pTable%3Deval(combo.tablename)%20%0D%0A%20%20%20%20var%20vHTML%3D'%3Ctable%20id%3Dhtmltable%20cellspacing%3D%220%22%20cellpadding%3D%222%22%20bgcolor%3D%22%23ffffff%22%20class%3D%22selecttable%22%20width%3D100%25%3E'%20%0D%0A%20%20%20%20for%20(i%3D0%3Bi%3Ccombo.options.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20vHTML%2B%3D'%3Ctr%20onmouseover%3D%22mo(this)%22%20onmouseout%3D%22mu(this)%22%20onclick%3D%22document.all.'%2Bcombo.name%2B'.innerHTML%3D%5C'%5C'%3Bvar%20t%3Ddocument.createElement(%5C'span%5C')%3Bt.innerHTML%3Dthis.innerHTML%3Bdocument.all.'%2Bcombo.name%2B'.appendChild(t)%3Bselectcontent.style.visibility%3D%5C'hidden%5C'%22%3E%3Ctd%20nowrap%3E'%2Bcombo.options%5Bi%5D%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20vHTML%2B%3D%22%3C%2Ftable%3E%22%20%0D%0A%20%20%20%20vDivHtml.innerHTML%3DvHTML%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vtop%3DpDiv.offsetTop%2BpDiv.offsetHeight%20%0D%0A%20%20%20%20vleft%3DpDiv.offsetLeft%2B1%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vParent%20%3D%20pDiv.offsetParent%3B%20%0D%0A%20%20%20%20%20%20%20%20while%20(vParent.tagName.toUpperCase()%20!%3D%20%22BODY%22)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20vleft%20%2B%3D%20vParent.offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20vtop%20%2B%3D%20vParent.offsetTop%3B%20%0D%0A%20%20%20%20%20%20%20%20vParent%20%3D%20vParent.offsetParent%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20var%20redge%3Ddocument.body.clientWidth-vleft%20%0D%0A%20%20%20var%20bedge%3Ddocument.body.clientHeight-vtop%20%0D%0A%20%20%0D%0A%20%20%20%20%20%20%20%0D%0A%0D%0A%20%20%20%20if%20(!combo.width)%20%7BvDiv.style.width%3DpTable.offsetWidth%7D%20else%20%7BvDiv.style.width%3Dcombo.width%7D%20%0D%0A%20%20%20%20%20%0D%0A%0D%0A%20%20%20%20if%20(combo.height%3D%3D0)%20%0D%0A%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20vDiv.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%20%20vDivHtml.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20if%20(htmltable.offsetHeight%3Ecombo.height)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20vDiv.style.pixelHeight%3Dcombo.height%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20vDivHtml.style.pixelHeight%3Dcombo.height%20%0D%0A%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20else%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20vDiv.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20vDivHtml.style.pixelHeight%3DparseInt(htmltable.offsetHeight)%2B2%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vDivHtml.scrollTop%3D0%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20if%20(redge%3CvDiv.offsetWidth)%20%0D%0A%20%20%20%20%20%20vDiv.style.left%3Dvleft-1-(vDiv.offsetWidth-redge)%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20vDiv.style.left%3Dvleft-1%20%0D%0A%20%20%20%20%20%20%20%0D%0A%0D%0A%20%20%20if%20(bedge%3CvDiv.offsetHeight)%20%0D%0A%20%20%20%20%2F%2FvDiv.style.top%3Dvtop-vDiv.offsetHeight-pDiv.offsetHeight%20%0D%0A%20%20%20%20vDiv.style.top%3Dvtop-vDiv.offsetHeight%2Bbedge%20%0D%0A%20%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20vDiv.style.top%3Dvtop%20%0D%0A%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20vDivHtml.style.width%3DparseInt(vDiv.style.width)%20%0D%0A%20%20%20%20%20%20vDiv.style.visibility%3D%22visible%22%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20this.add%3Dfunction(text)%7B%20%0D%0A%20%20%20%20%20combo.options%5Bcombo.options.length%5D%3Dtext%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20this.about%3Dfunction()%7B%20%0D%0A%20%20%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20mo(obj)%7B%20%0D%0Aobj.style.backgroundColor%3D%22%23000099%22%20%0D%0Aobj.style.color%3D%22%23ffffff%22%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20mu(obj)%7B%20%0D%0Aobj.style.backgroundColor%3D%22%22%20%0D%0Aobj.style.color%3D%22%23000000%22%20%0D%0A%7D%20%0D%0A%0D%0Adocument.onmousedown%3Dfunction()%7B%20%0D%0Aif%20(vDiv.style.visibility%3D%3D%22visible%22)%7B%20%0D%0Amx%3Devent.x%20%2B%20document.body.scrollLeft%20%0D%0Amy%3Devent.y%20%2B%20document.body.scrollTop%3B%20%0D%0A%0D%0Ax1%3DvDiv.offsetLeft%20%0D%0Ay1%3DvDiv.offsetTop%20%0D%0A%0D%0Ax2%3DvDiv.offsetLeft%2BvDiv.offsetWidth%20%0D%0Ay2%3DvDiv.offsetTop%2BvDiv.offsetHeight%20%0D%0A%0D%0Aif%20(mx%3Cx1%20%7C%7C%20my%3Cy1%20%7C%7C%20x2%3Cmx%20%7C%7C%20y2%3Cmy)%20%20%0D%0A%20%20%20%7B%20%20%0D%0A%20%20%20%20%20vDiv.style.visibility%3D'hidden'%20%0D%0A%20%20%20%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

.selectdiv 
{ 
position: absolute;  
width:100; 
overflow:hidden; 
} 
.select{ 
border-collapse: collapse; 
border:1px solid #7F9DB9 
} 
</style> 
</head>

<center> 
<table border="0" width="234"> 
    <tr> 
        <td width="151" align="center"><font size="2">可编辑的Select</font></td> 
        <td><img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20sel1%3Dnew%20editselect(%22select1%22%2C%2225%22%2C%22%E5%8F%AF%E7%BC%96%E8%BE%91%E7%9A%84Select%22%2C%22%22)%3B%20%0D%0Asel1.add(%22%3Cmarquee%20behavior%3Dalternate%3E%3Cimg%20src%3D'http%3A%2F%2Fwww.blueidea.com%2Farticleimg%2Fbbsimg%2Ficon6.gif'%20align%3D'absmiddle'%3E%20%20%3CB%3E%3Cfont%20color%3D%2322FF22%3E%E7%9F%A5%3C%2Ffont%3E%3Cfont%20color%3D%23FF2222%3E%E5%BE%80%3C%2Ffont%3E%3Cfont%20color%3D%23001199%3E%E8%A7%82%3C%2Ffont%3E%3Cfont%20color%3D%2300fffa%3E%E6%9D%A5%3C%2Ffont%3E%3C%2FB%3E%3C%2Fmarquee%3E%22)%20%0D%0Asel1.add(%22%3Cimg%20src%3D'http%3A%2F%2Fwww.blueidea.com%2Farticleimg%2Fbbsimg%2Ficon7.gif'%20align%3D'absmiddle'%3E%20%20%E5%BE%AE%E9%A3%8E%E9%A6%99%E6%B0%B4%22)%20%0D%0Asel1.add(%22%3Cimg%20src%3D'http%3A%2F%2Fwww.blueidea.com%2Farticleimg%2Fbbsimg%2Ficon8.gif'%20align%3D'absmiddle'%3E%20%20%E9%98%B3%E5%85%89%E9%94%88%E4%BA%86%22)%20%0D%0Asel1.add(%22%3Cimg%20src%3D'http%3A%2F%2Fwww.blueidea.com%2Farticleimg%2Fbbsimg%2Ficon9.gif'%20align%3D'absmiddle'%3E%20%20%3CB%3E%3Cfont%20color%3D%2322FF22%3E%E8%A7%82%3C%2Ffont%3E%3Cfont%20color%3D%23FF2222%3E%E5%BE%80%3C%2Ffont%3E%3Cfont%20color%3D%23001199%3E%E7%9F%A5%3C%2Ffont%3E%3Cfont%20color%3D%2300fffa%3E%E6%9D%A5%3C%2Ffont%3E%3C%2FB%3E%22)%20%0D%0A%3C%2Fscript%3E"></td> 
    </tr> 
    <tr> 
        <td width="151" align="right">　</td> 
        <td> </td> 
    </tr> 
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<!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"> 
 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20%20lanuage%3D%22JScript%22%3E%20%0D%0Afunction%20%20turnit(ss)%20%0D%0A%7B%20%0D%0A%0D%0A%20%20if%20%20(ss.style.display%3D%3D%22none%22)%20%20%20%0D%0A%20%20%20%20%7Bss.style.display%3D%22%22%3B%20%0D%0A%7D%20%0D%0A%0D%0A%20%20else%20%0D%0A%20%20%20%20%7Bss.style.display%3D%22none%22%3B%20%20%20%20%0D%0A%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20sele(tid)%20%0D%0A%7B%20%0D%0Abb.style.display%3D'none'%3B%20%0D%0Atext1.value%3Dtid.innerText%3B%20%0D%0A%7D%20%0D%0Afunction%20over(tid)%20%0D%0A%7B%20%0D%0Afor%20(var%20i%3D1%3Bi%3C4%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aeval('t'%2Bi).className%3D''%20%0D%0A%7D%20%0D%0Atid.className%3D'ss'%20%0D%0A%7D%20%0D%0Afunction%20out(tid)%20%0D%0A%7B%20%0D%0Aif%20(bb.style.display!%3D'none')%20%0D%0Atid.className%3D''%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
 
</style> 
</head>

</table> 
      </div></td> 
  </tr> 
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<!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"> 
 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20%20lanuage%3D%22JScript%22%3E%20%0D%0Afunction%20%20turnit(ss)%20%0D%0A%7B%20%0D%0A%0D%0A%20%20if%20%20(ss.style.display%3D%3D%22none%22)%20%20%20%0D%0A%20%20%20%20%7Bss.style.display%3D%22%22%3B%20%0D%0A%7D%20%0D%0A%0D%0A%20%20else%20%0D%0A%20%20%20%20%7Bss.style.display%3D%22none%22%3B%20%20%20%20%0D%0A%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20sele(tid)%20%0D%0A%7B%20%0D%0Abb.style.display%3D'none'%3B%20%0D%0Atext1.value%3Dtid.innerText%3B%20%0D%0A%7D%20%0D%0Afunction%20over(tid)%20%0D%0A%7B%20%0D%0Afor%20(var%20i%3D1%3Bi%3C4%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aeval('t'%2Bi).className%3D''%20%0D%0A%7D%20%0D%0Atid.className%3D'ss'%20%0D%0A%7D%20%0D%0Afunction%20out(tid)%20%0D%0A%7B%20%0D%0Aif%20(bb.style.display!%3D'none')%20%0D%0Atid.className%3D''%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
 
</style> 
</head>

</table> 
      </div></td> 
  </tr> 
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程

select发展史 超强

select发展史超强