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

253 阅读 0 评论 167 点赞

我是靠谱客的博主甜美电源，最近开发中收集的这篇文章主要介绍打造个性化的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>

.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需刷新才能执行]