select发展史超强第1/2页

224 阅读 0 评论 148 点赞

我是靠谱客的博主畅快裙子，最近开发中收集的这篇文章主要介绍select发展史超强第1/2页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

日久天长之后,人们对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 
 
</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需刷新才能执行]

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

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

.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></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下一页阅读全文