可编辑下拉框的2种实现方式

可编辑下拉框-HTML

可编辑下拉框-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命令操作详解