请问可否有js控制select空间的下拉窗口的展开和关闭？

MikeCheers 2006-04-13 04:31:42

如题，用途就是模拟combox时，可以动态的列出相近性的信息，而且直接从下拉窗口中选择就可以了。

...全文

530 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

MikeCheers 2006-04-14

打赏
举报

强烈感谢 JK_10000(JK)

JK_10000 2006-04-13

打赏
举报

JK_10000 2006-04-13

打赏
举报

至于可输入下拉框，
这里有一个JK的（从把yahoo的收件人输入框的代码改过来的）
另外,本论坛里meizz的也有一个，
你可以找找看看


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Editable listbox</title>

<style>

/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}

/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
height:expression((this.scrollHeight>210)?"210px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}

/* JK */
.minHeightTextarea{
height:expression((this.scrollHeight>150)?"150px":(this.scrollHeight+5)+"px");
overflow : auto;
}

</style>

<script language=javascript>

var tofieldListArray=["a@b.c","深圳市科技园","深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","a@b.c","a@b.c",
"a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","深圳市科技园",
"深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c",
"a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","深圳市科技园","深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","a@b.c",
"a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","深圳市科技园",
"深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","a@b.c",
"a@b.c","a@b.c","a@b.c","a@b.c","a@b.c","深圳","a@"];
var ccfieldListArray=tofieldListArray;

</script>

<script language=javascript>

var AC_TAB = 9; // make the selection
var AC_ENTER = 13; // make the selection
var AC_UP_ARROW = 38; // move the drop down list selection up by one
var AC_DOWN_ARROW = 40; // move the drop down list selection down by one

var theListDiv;
var theListArray;
var theComboxObj;

onload=OnLoad
function OnLoad()
{
setTimeout("Initialize()", 100);
}

function Initialize()
{
AddListDivFun(document.all.tofield);
AddListDivFun(document.all.ccfield);
}

function AddListDivFun(obj)
{
theListArray=eval(obj.id+"ListArray");
var tempStr=new Array();
var tempI=0;
tempStr[tempI++]='<DIV style="position:relative;visibility:hidden">'
+'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 1; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
+'onmouseover="mouseOverListDivFun(event)" onmouseout="mouseOutListDivFun(event);" onmousedown="mouseDownListDivFun(event);">';
for(var i=0;i<theListArray.length;i++)
tempStr[tempI++]='<DIV class=ac_menuitem value='+i+' >'+htmlEncode(theListArray[i])+'</DIV>';
tempStr[tempI++]="</DIV></DIV>";
obj.insertAdjacentHTML("afterEnd",tempStr.join(""));
theListDiv=eval(obj.id+"ListDiv");
obj.onfocus=AC_OnFocus;
obj.onblur=AC_OnBlur;
obj.onkeydown=AC_OnKeyDown;
obj.autoComplete="off";
obj.onpropertychange=AC_OnPropertyChange;
}

function AC_OnFocus(obj)
{
if(obj==null) obj=event.srcElement;
theListDiv=eval(obj.id+"ListDiv");
theListArray=eval(obj.id+"ListArray");
theComboxObj=obj;
theListDiv.style.visibility="visible";
adjustListDivScroll();
}

function AC_OnBlur(obj)
{
if(obj==null) obj=event.srcElement;
if(theListDiv.contains(document.activeElement)) obj.focus();
else theListDiv.style.visibility="hidden";
}

function AC_OnPropertyChange(obj)
{
if(obj==null) obj=event.srcElement;
theListDiv=eval(obj.id+"ListDiv");
if(theListDiv==null) return ;
theListArray=eval(obj.id+"ListArray");
var theListDivChildren=theListDiv.children;
theListDiv.selectedIndex=-1;
var theFirstVisibleIndex=-1;
var objValue=obj.value;
for(var i=0;i<theListArray.length;i++)
{
if(theListArray[i].indexOf(objValue)==0)
{
if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
theListDivChildren[i].className="ac_menuitem";
theListDivChildren[i].style.display="";
theListDivChildren[i].innerHTML="<b>"+htmlEncode(objValue)+"</b>"+htmlEncode(theListArray[i].substr(objValue.length));//这一句可以省略以节约资源
}
else
theListDivChildren[i].style.display="none";
if(theListDiv.selectedIndex==-1 && theListArray[i]==objValue) theListDiv.selectedIndex=i;
}
if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1)
{
theListDiv.selectedIndex=theFirstVisibleIndex;
}
if(theListDiv.selectedIndex!=-1) theListDivChildren[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
}

function AC_OnKeyDown(obj)
{
if(theListDiv==null) return ;
if(obj==null) obj=event.srcElement;
var keyCode=event.keyCode;
if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1)
{
obj.value=theListArray[theListDiv.selectedIndex];
return ;
}

if(keyCode==AC_UP_ARROW && theListDiv.selectedIndex!=-1)
{
for(var i=theListDiv.selectedIndex-1;i>-1;i--)
{
if(theListDiv.children[i].style.display!="none")
{
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
break;
}
}
}

if(keyCode==AC_DOWN_ARROW && theListDiv.selectedIndex!=-1)
{
for(var i=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
{
if(theListDiv.children[i].style.display!="none")
{
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
break;
}
}
return;
}

}

JK_10000 2006-04-13

打赏
举报

<select name=abc>
<option>fdsafds</option>
</select>
<script language="JavaScript">
window.setInterval("document.all.abc.length+=1;document.all.abc.length-=1;","1")
</script>

MikeCheers 2006-04-13