可编辑的下拉列表框，有时候很有用

winderxp

于 2007-02-09 10:09:00 发布

阅读量728

点赞数

分类专栏： JavaScript 文章标签： function javascript input table asp html

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript自定义实现ComboBox的方法，通过结合ListBox和Input元素来创建一个可下拉选择且可直接输入的组合框，并提供了完整的源代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一,基本原理:
ComboBox实质上就是listbox+input,
首先初始化的时候将listbox 和input文本框重叠,设定listbox的clip区域,
当选定了下拉框的项时(onchange事件被触发),将listbox选择的文本填入input文本框,

二,源代码:
下面是一个基于asp的代码,将代码完全复制存为一个asp或htm文件执行就可看出效果.

三, 缺点:
该ComboBox有个明显的缺陷就是select Object必须选择absolute风格, 这对于位置不固定的listbox比较难于确定它的位置.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="javascript">

function Body_Init()

{

var oSelect = document.frmMain.ddlState;

var oText = document.frmMain.txbState;

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;

}

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<oSelect.options.length;i++)

{

if(oSelect.options[i].text==name)

return i;

}

return -1;

}

</SCRIPT> </HEAD>

<BODY onload="javascript:Body_Init();">

<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>

</HTML>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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