select发展史超强第1/2页

作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:

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

<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></head><body>

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

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

[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><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 } .selectdiv { 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></td></tr><tr>   <td width="151" align="center"><font size="2">长度可以随意修改 可以设置为只读</font></td><td>   </td></tr><tr>   <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td><td>   </td></tr><tr>   <td width="151" align="right">　</td><td><select><option>系统的Select</option></select>　</td></tr></table></body></html>

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

12 下一页阅读全文

以上就是select发展史超强第1/2页的详细内容，更多请关注0133技术站其它相关文章！