当前位置：移动技术网 > IT编程>开发语言>JavaScript > 打造个性化的Select(可编辑)

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

2019年07月31日 | 移动技术网IT编程 | 我要评论

由于系统自带的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</select>　</td> 
    </tr> 
</table> 
</body>

</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Vue的响应式原理

受现代JavaScript 的限制 (以及废弃 Object.observe)，Vue不能检测到对象属性的添加或... [阅读全文]
PHP+txt聊天室

PHP+txt聊天室最近朋友发了一篇ASP+txt聊天室，非常不爽，我可是支持PHP的啊所以就发了这篇文章由于是... [阅读全文]
教你如何做一个优雅的Ecmascripter /转

看看这些被同事喷的JS代码风格你写过多少殷荣桧JavaScript今天现在写代码比以前好多了，代码的格式都有es... [阅读全文]
Javascript知识点总结（一）

一、走进javascript什么是JS？JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型... [阅读全文]
利用JS来判断输入是否为空以及重复密码是否相同

登录页面HTML如下：<div class="form-group has-feedback"> ... [阅读全文]
Vue入门基础——第一次笔记

Vue.js是什么？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层... [阅读全文]
react+antd 给switch设置初始值变量

在react项目中表单内的switch功能，设置初始值为变量，所以需要在Form.Item 标签上添加一个val... [阅读全文]
@vue/cli 4.4.6解决跨域问题

在前端@vue/cli 4.4.6解决跨域问题，可以通过vue.config.js配置完成例如：需要访问http... [阅读全文]
offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidthdiv{ width: 20px; ... [阅读全文]
vue 性能优化：gzip编译压缩

安装：compression-webpack-pluginnpm install compression-web... [阅读全文]

网友评论


验证码：

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

2019年07月31日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论