打造个性化的Select(可编辑)

由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select.

功能:
  1.可编辑的Select
  2.长度可以随意修改
  3.可以遮盖系统Select
  4.支持forms
  5.支持CSS修改外观
  6.修正在IE 5.0上运行出错的问题
  7.支持使用js脚本
使用方法
[b]var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)[/b]
[b]实体化变量.add(option数值,JS脚本)[/b]

这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意见.

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title>  <sty1e> .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"> <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需再刷新一下页面才能执行]

打造个性化的Select(可编辑)

JavaScript相关栏目本月热门文章