<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="combox.js"></script>
</HEAD>
<BODY>
<table border="1" 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的值" onclick="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的值" onclick="alert(document.getElementById('password').value)">
</td>
</tr>
</table>
<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.onchange=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.onchange=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;
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
基于Javascript的可编辑下拉列表框的设计与实现.pdf
功能强大的可编辑下拉列表框，js源码，支持分页，输入定位
NULL 博文链接：https://carl2010.iteye.com/blog/650571
ListView 中实现可编辑文本或双击出现下拉列表框 重写listview空间，在控件中添加下拉框和文本框
可编辑的下拉列表框 本自定义控件用于.net，主要解决又想有输入又想有选择的问题。
可编辑的级联下拉列表框 漂亮的可编辑的下拉列表框 巧妙的方法实现了级联 jquery实现
既能输入信息又能从下拉列表框中选择信息的控件组合
纯JS可输入下拉列表框，代码简单，但是很实用。
在CSDN上得到了很多帮助。看到很多朋友都需要ListView 实现可编辑或双击出现下拉列表框。所以自己做了一个给大家参考
可下拉选择，可输入编辑的文本框
实现select下拉选项可编辑
是一个jQuery的插件，可以实现一个彩色的下拉列表框，并可以实现可编辑，ie 火狐均支持，默认是蓝色界面，可以自己从新换界面
1.可分别设置组合框中编辑框和下拉列表框的字体、字体颜色、字体大小 2.可设置只读属性 3.可根据下拉列表项的文本长度扩宽下拉列表宽度 4.重绘下拉列表，包括边框和具有焦点的项 5.下拉列表项中提供了删除功能，非...
js+CSS 实现可以编辑的下拉列表框，适应多浏览器。引用方便快捷
主要介绍了ExtJS中设置下拉列表框不可编辑的方法,需要的朋友可以参考下