站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题用Javascript实现类似ComboBox的可编辑下拉列表框.

用Javascript实现类似ComboBox的可编辑下拉列表框.

摘要: 用Javascript实现类似ComboBox的可编辑下拉列表框.
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">

前几天从网上找到一份类似的代码,结果不能用,经过自己琢磨该位仁兄的代码并经过自我推敲,终于成功作出ComboBox的下拉列表框:
一,基本原理:
ComboBox实质上就是listbox+input,
首先初始化的时候将listbox 和input文本框重叠,设定listbox的clip区域,
当选定了下拉框的项时(onchange事件被触发),将listbox选择的文本填入input文本框,
二,源代码:
下面是一个基于asp的代码,将代码完全复制存为一个asp或htm文件执行就可看出效果.

<head>
<script LANGUAGE="javascript">
</script>

<script LANGUAGE="javascript">
function Body_Init(oSelect,oText)
{
var iLeft= oSelect.offsetLeft;
var iTop = oSelect.offsetTop;
var iWidth=oSelect.clientWidth;
var iHeight=oSelect.clientHeight;
oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')';

oText.style.width=iWidth;
oText.style.height=iHeight;
oText.style.top =iTop;
oText.style.left=iLeft;

}
function Combo_Select(oSelect,oText)
{
oText.value=oSelect.options[oSelect.selectedIndex].text;
alert(oText.value);
}
function Text_ChkKey(oSelect,oText)
{
if(event.keyCode==13)
{
var nIndex=HasTheValue(oText.value,oSelect);
if(nIndex !=-1 && nIndex !=oSelect.selectedIndex)
{
oSelect.selectedIndex=nIndex;
}
}
}
function HasTheValue(name,oSelect)
{
if(oSelect.options.length<1)
return -1;
var i=0;
for(i=0;i {
if(oSelect.options[i].text==name)
return i;
}
return -1;
}

</script>
</head>
<body onload="javascript:Body_Init(pCombo,pText);">
<table width=50% width=50% align="center" valign="middle">
<tr><td>
<select STYLE="position:absolute;left:0;top:0;" ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" >
<option value="d">test1
<option value="dd">test2

</select>
<input STYLE="position:absolute;" onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText">
</td></tr>
</table>
</body>

三, 缺点:
该ComboBox有个明显的缺陷就是select Object必须选择absolute风格, 这对于位置不固定的listbox比较难于确定它的位置.
如果有Javascript高手能实现relative风格的ComboBox,请直接在评论里告诉一下,万分感谢


</textarea>
↑返回目录
前一篇: 如何在ASP.NET中使用JavaScript脚本
后一篇: JavaScript中实现简单的类的继承