select发展史超强_表单特效

按回车键输入新内容，按DEL删除选中内容 <body bgcolor="#fef4d9" onload="s1.focus();"> <script language="JavaScript">  </script> <select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>

[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> <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">  </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><div 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>       </div></td>   </tr> </table> </body> </html>

[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>  <base href="http://lucky.diy.myrice.com/temp/"> <body  leftmargin="50" topmargin="50"> <style> .optionForSel {font-size:9pt} </style> <center> <table cellpadding="0" cellspacing="0" border="0" width="300">     <tr>         <td id="selectLength" width="100%" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;">             <div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>         </td>         <td width="20" style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt">             <img src="button2.gif" width="20" height="21" border="0" id="mm" onclick="mm_Click()" align="absmiddle">         </td>     </tr> </table> <div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:1000">     <table width="100%" cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White">         <tr onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''">             <td onclick="document.all.selectedValue.innerText=this.innerText">                 <img src="http://lucky.myrice.com/images/copyright.gif" border="0" align="absmiddle" hspace="2"><a href="http://lucky.myrice.com">一个好孩子</a>             </td>         </tr>         <tr>             <td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''"onclick="document.all.selectedValue.innerText=this.innerText">                 <img src='http://lucky.myrice.com/images/meng1.gif' border="0" align="absmiddle" hspace="2"><a href="http://lucky.myrice.com">二两疙瘩肉</a>             </td>         </tr>         <tr>             <td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''"onclick="document.all.selectedValue.innerText=this.innerText">                 <img src='http://lucky.myrice.com/images/meng2.gif' border="0" align="absmiddle" hspace="2"><a href="http://lucky.myrice.com">三分油菜田</a>             </td>         </tr>     </table> </div> <script> function mm_Click() {     if(document.all.dropdownOption.style.visibility == 'visible')         document.all.dropdownOption.style.visibility='hidden'     else         document.all.dropdownOption.style.visibility='visible' } function init(){ document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22; document.all.selectedValue.contentEditable = true; var strTop = 0; var strLeft = 0; var e1 = document.all.selectLength; while(e1.tagName != "BODY") { strTop += e1.offsetTop strLeft += e1.offsetLeft e1 = e1.offsetParent } document.all.dropdownOption.style.top = String(strTop + 24) + "px"; document.all.dropdownOption.style.left = String(strLeft) + "px"; } function clickE() { if(window.event.srcElement.id !='mm') document.all.dropdownOption.style.visibility='hidden'; } document.onclick = clickE window.onload = init </script>  <input onclick="alert(document.all.selectedValue.innerText)" type="button" value="得到选中的值">

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title> <script> scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">select&Aacute;&ETH;&#177;&#237;</div></div>' 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.divname=name+'_div';   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='<div id='+this.divname+'>'          +'<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>'          +'</div>'   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.divname)     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 } .selectdiv { 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>&nbsp;</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> <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">  </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><div 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>       </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> <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">  </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><div 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>       </div></td>   </tr> </table>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]