- 一。
- /**
- *可编辑下拉框对象类
- *
- *可编辑下拉框,其实就是在下拉框的上面放了个无边框的输入框,在输入框输数据时,下拉框自动定位,
- *下拉框选中某项时,下拉框的值赋给输入框,从而产生错觉
- *
- */
- 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");
- thisthis.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()
- {
- thisthis.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text;
- with (this.inputbox)
- {
- select();
- focus();
- }
- }
- }
- /**
- * 定位函数,获取控件绝对坐标
- */
- function getLeftPos(e)
- {
- var left=e.offsetLeft;
- while (ee=e.offsetParent)
- {
- left+=e.offsetLeft;
- }
- return left;
- }
- function getTopPos(e)
- {
- var top=e.offsetTop;
- while (ee=e.offsetParent)
- {
- top+=e.offsetTop;
- }
- return top;
- }
- //可编辑下拉框测试页面
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <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 ">
- 下拉框:<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>-->
- </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);
- </script>
- </BODY>
- </HTML>
二。
/**
来个更简单的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>可选择可输入的下拉框</title>
<style type="text/css">
.combobx {width:100px;overflow:hidden;position:relative;padding:0;display:inline;}
.combobx input {width:80px;position:absolute;left:0;top:0;}
.combobx select {width:100px;position:absolute;left:0;top:0;clip:rect(auto auto auto 82px);}
</style>
</head>
<body>
<form method="post" action="#">
学历:
<div class="combobx"><input type="text" name="xxx">
<select οnchange="this.parentNode.childNodes[0].value=this.value;">
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="大学">大学</option>
</select>
</div>
</form>
</body>
</html>
*/