快捷導(dǎo)航

select發(fā)展史超強(qiáng)

更新時(shí)間：2007年02月07日 00:00:00 作者：

接續(xù)上文
可編輯的select:

為了讓select里有更多的圖片、css修飾及其他靜、動(dòng)態(tài)修飾效果，而select本身優(yōu)先級(jí)別太高，其修飾效果很少且不能滿足上述要求，遂涌現(xiàn)出很多模擬的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>  <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=請(qǐng)選擇 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   class="wppm3vysvbp"   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需再刷新一下頁面才能執(zhí)行]

<center><sup><font face="隸書" color="blue">上標(biāo)是不是這個(gè)？</font></sup><font size="6" face="華文行楷" color="red">如果要想以其他的文字作為上標(biāo)該怎么做??？</font><sub><font face="黑體" color="green"><b><i>下標(biāo)是不是這個(gè)？</b></i></font></sub>  <base href="http://www.fzitv.net/"/> <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   class="wppm3vysvbp"   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   class="wppm3vysvbp"   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">一個(gè)好孩子</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>   <input onclick="alert(document.all.selectedValue.innerText)" type="button" value="得到選中的值">

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

下面這兩個(gè)已達(dá)到較高的水準(zhǔn)（動(dòng)態(tài)內(nèi)容）：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title>  <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></td>     </tr>     <tr>         <td width="151" align="right">　</td>         <td>&nbsp;</td>     </tr> </table>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

<!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>  <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   class="wppm3vysvbp"   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">藍(lán)色月光</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需再刷新一下頁面才能執(zhí)行]

<!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>  <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   class="wppm3vysvbp"   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">藍(lán)色月光</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需再刷新一下頁面才能執(zhí)行]