可编辑下拉框的2种实现方式
可编辑下拉框-HTML
A类
B类
C类
D类
可编辑下拉框-JS
可编辑下拉框可编辑下拉框 作者 |
function combox(obj,select){
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)[0];
/*要转换的下拉框*/
}
/*初始化对象*/
combox.prototype.init=function(){
var inputbox="
inputbox+="style='position:absolute;width:"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>"
document.write(inputbox)
with(this.select.style){
left=getL(this.select)
top=getT(this.select)
position="absolute"
clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")"
/*切割下拉框*/
}
this.select.οnchange=new Function(this.obj+".change()")
this.change()
}
/*初始化结束*/
对象事件定义///
combox.prototype.find=function(){
/*当搜索到输入框的值时,下拉框自动定位*/
var inputbox=document.getElementsByName("combox_"+this.name)[0]
with(this.select){
for(i=0;i
if(options[i].text.indexOf(inputbox.value)==0){
selectedIndex=i
this.change();
break;
}
}
}
combox.prototype.change=function(){
/*定义下拉框的onchange事件*/
var inputbox=document.getElementsByName("combox_"+this.name)[0]
inputbox.value=this.select.options[this.select.selectedIndex].text;
with(inputbox){select();focus()};
}
对象事件结束///
/*公用定位函数(获取控件绝对坐标)*/
function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent)l+=e.offsetLeft;
return l
}
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent)t+=e.offsetTop;
return t
}
/*结束*/
var a=new combox("a","fason")
a.init()
相关阅读:
jQuery EasyUI 入门必看
Asp.net,C# 加密解密字符串的使用详解
SSH网上商城之使用ajax完成用户名是否存在异步校验
win7安装php框架Yii的方法
基于Jquery.history解决ajax的前进后退问题
基于C#实现一个最简单的HTTP服务器实例
win10手机系统预览版10051已修复内容汇总
CSS中基代码base.css一览
升级win10后字体模糊怎么办?Win10升级后字体/文字显示模糊的解决方法
Linux命令之日期时间命令date使用实例
java实现单链表、双向链表
输入值/表单提交参数过滤有效防止sql注入的方法
VC程序设计中CreateProcess用法注意事项
MYSQL数据库中cmd命令操作详解