JS实现可编辑下拉框

<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:script language="javascript" src="combox.js" mce_src="combox.js"></mce:script> </HEAD> <BODY> <table border="1" style="border-collapse:collapse " mce_style="border-collapse:collapse "> <tr> <td width="300"><select name=test1> <option value="可编辑下拉框1" selected>可编辑下拉框1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <INPUT TYPE="button" value="获取编辑框1的值" οnclick="alert(document.getElementById('username').value)"> </td> <td width="109"><select name=test2> <option value="可编辑下拉框2">可编辑下拉框25555555</option> <option value="1">4</option> <option value="2" selected>5</option> <option value="3">6</option> </select> </td> <td width="343"> <INPUT TYPE="button" value="获取编辑框2的值" οnclick="alert(document.getElementById('password').value)"> </td> </tr> </table> <p></p> <p></p> <mce:script language="javascript"><!-- var a=new combox("username","test1"); //参数1为新生成输入框的名称 //参数2为原来的select对象名称 a.init(a); var b=new combox("password","test2"); b.init(b); function combox(_inpuObjName,_controlSelectName) { this.inpuObjName=_inpuObjName;//生成的输入框对象名称 this.inputbox=null;//生成的输入框对象 this.controlSelect=document.getElementById(_controlSelectName);//原来的下拉框对象 //初始化对象 //_comboxObj:combox对象,须指向自己 this.init=function(_comboxObj) { this.inputbox=document.createElement("input"); this.inputbox.id=this.inpuObjName; this.inputbox.comboxObj=_comboxObj; this.inputbox.οnchange=function() { this.comboxObj.find(); } with(this.inputbox.style) { width=this.controlSelect.offsetWidth-16; height=this.controlSelect.offsetHeight; } this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox); _span=document.createElement("span"); _span.style.width=18; this.controlSelect.insertAdjacentElement("beforeBegin",_span); _span.appendChild(this.controlSelect); _container=document.createElement("span"); this.inputbox.insertAdjacentElement("beforeBegin",_container); _container.appendChild(this.inputbox); _container.appendChild(_span); _container.style.width=this.inputbox.offsetWidth+18; _width=this.controlSelect.offsetWidth-18; with (this.controlSelect.style) { margin="0 0 0 -"+_width; } this.controlSelect.comboxObj=_comboxObj; this.controlSelect.οnchange=function() { this.comboxObj.change(); } this.change(); } //当搜索到输入框的值时,下拉框自动定位/ this.find=function() { with (this.controlSelect) { for(i=0;i<options.length;i++) if(options[i].text.indexOf(this.inputbox.value)==0) { selectedIndex=i; this.change(); break; } } } //定义下拉框的onchange事件 this.change=function() { this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text; with (this.inputbox) { select(); focus(); } } } /** * 定位函数,获取控件绝对坐标 */ function getLeftPos(e) { var left=e.offsetLeft; while (e=e.offsetParent) { left+=e.offsetLeft; } return left; } function getTopPos(e) { var top=e.offsetTop; while (e=e.offsetParent) { top+=e.offsetTop; } return top; }   // --></mce:script> </BODY> </HTML>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值