正文： 参与插件： select(下拉框：默认display:none)×1，text(文本框)×1，主div(层)×1，辅div(层)×n 原理： text.onfocus事件中从select中读取option项以一个option一个div的方式将option项加载到div内，并将div定位到text的下面，并同步div和text的宽度，然后div显示，激活select隐藏函数，将div覆盖到的select的visibility属性全设置为hidden(因为在IE中div是遮不住select的)，同时向text加载各种必要的事件，确保能及时的作出反应。 text.onclick加载与onfocus一样的函数，可以确保用户的重复使用。 text.onkeyup加载匹配功能，用户在文本框内输入资料时自动匹配相符合的option项。 text.onblur判断操作真的结束后(m_intTextSelectIn=true)将div.display设置为none使div隐藏，并激活select显示函数，将一开始被隐藏的select显示出来。
主div.onmouseout将m_intTextSelectIn设置为false锁定结束标识，并将焦点赋给text，避免鼠标未作选择，但已经离开了文本框和主div。 主div.onmouseover将m_intTextSelectIn设置为true释放被锁定的结束标识
辅div.onmouseover修改当前div的背景，表示鼠标正处于该div上方。 辅div.onclick将m_intTextSelectIn设置为true释放被锁定的结束标识，并将outerText赋值给text.value。最后将焦点赋给text，然后再blur将焦点弹开(本操作在Firefox里提示出错，但不影响使用)，激活text.onblur事件。
以上即时这个下拉输入框的工作基本原理。还有一些小细节，如主div超出限定长度后会出现下拉框，主div的命名之类的。还有特别注明一下代码里的getPosition、HideOverSels、Obj1OverObj2均出至51js版主宝玉大侠之手，特此鸣谢。^^ 以下是作好的js代码，给有需要的朋友：
/*---------------------------------textselect.js--------------------------------------------------*/
var m_strTextselectDiv="Textselectshow_Div"var m_intTextSelectIn=falsevar ie=(document.getElementById && document.all);
for(var IDx=0,IDy='';document.getElementById(m_strTextselectDiv)!=null;IDx++,IDy=IDx){ m_strTextselectDiv=(document.getElementById(m_strTextselectDiv + IDy)==null)?m_strTextselectDiv + IDy:m_strTextselectDiv}document.write ('<div id="' + m_strTextselectDiv + '" style="position: absolute;cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')// 获取对象的坐标function getPosition(Obj) { try{ for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,Obj=Obj.offsetParent); return {left:sumLeft,top:sumTop} }catch(e){}}//处理Div中的选项/* 某个选项，输入框的ID号 */function divOnmoveover(obj,objText){ var MM_objText=document.getElementById(objText)
var objChilddiv=obj.parentNode.getElementsByTagName("div") for(var x=0;x<objChilddiv.length;x++){objChilddiv[x].style.cssText=''} obj.style.cssText='background-color: #330066;color: #ffffff;'
obj.οnclick=function(){ m_intTextSelectIn=false if(ie) {MM_objText.value=obj.outerText} else {MM_objText.value=obj.textContent} MM_objText.focus() MM_objText.blur() }}
function showSelect(obj,A_seleObj){ var ie=(document.getElementById && document.all); var objDiv =document.getElementById(m_strTextselectDiv) var seleObj =document.getElementById(A_seleObj) //循环取名，避免取了个重复的ID号 for(var IDx=0,IDy='';obj.id=='';IDx++,IDy=IDx){ obj.id=(document.getElementById("textSelect" + IDy)==null)?"textSelect" + IDy:'' } objDiv.style.left=getPosition(obj).left objDiv.style.top=getPosition(obj).top+obj.offsetHeight objDiv.style.width=obj.offsetWidth objDiv.style.height=''; objDiv.style.overflowY=''; objDiv.innerHTML='' //读取select的项目放到Div里。 for(var x=0;x<seleObj.options.length;x++) {objDiv.innerHTML+="<div οnmοuseοver=/"divOnmoveover(this,'" + obj.id + "')/" style='width:100%;white-space: nowrap;cursor: default;'>"+seleObj.options[x].text+"</div>"} //调整Div高度，过度显示滚动条 if(x>8) { objDiv.style.height=100; objDiv.style.overflowY='auto'; } objDiv.style.display='' if(ie){HideOverSels(objDiv.id)} objDiv.οnmοuseοver=function(){m_intTextSelectIn=true} objDiv.οnmοuseοut=function(){m_intTextSelectIn=false;obj.focus();} obj.οnclick=function(){showSelect(obj,A_seleObj);obj.onkeyup();} //自动匹配选项中符合条件的记录 obj.οnkeyup=function(){ if(obj.value==''){return false} var objChilddiv=objDiv.getElementsByTagName("div") for(var x=0;x<objChilddiv.length;x++) {objChilddiv[x].style.cssText=''} for(var x=0;x<objChilddiv.length;x++) { var strChilddiv=(ie)?objChilddiv[x].outerText:obj.textContent if(strChilddiv.substr(0,obj.value.length)==obj.value) { objDiv.scrollTop=objChilddiv[x].offsetHeight*x objChilddiv[x].style.cssText='background-color: #330066;color: #ffffff;' return true } } } obj.οnblur=function(){if(!m_intTextSelectIn){objDiv.style.display='none'};if(ie){HideOverSels(objDiv.id)}}}
// 隐藏被ID为objID的对象（层）遮挡的所有selectfunction HideOverSels(objID){ var sels = document.getElementsByTagName('select'); for (var i = 0; i < sels.length; i++) if (Obj1OverObj2(document.getElementById(objID), sels[i])) sels[i].style.visibility = 'hidden'; else sels[i].style.visibility = 'visible';}
//判断obj1是否遮挡了obj2function Obj1OverObj2(obj1, obj2){var pos1 = getPosition(obj1) var pos2 = getPosition(obj2) var result = true; var obj1Left = pos1.left - window.document.body.scrollLeft; var obj1Top = pos1.top - window.document.body.scrollTop; var obj1Right = obj1Left + obj1.offsetWidth; var obj1Bottom = obj1Top + obj1.offsetHeight;var obj2Left = pos2.left - window.document.body.scrollLeft; var obj2Top = pos2.top - window.document.body.scrollTop; var obj2Right = obj2Left + obj2.offsetWidth; var obj2Bottom = obj2Top + obj2.offsetHeight;
if (obj1Right <= obj2Left || obj1Bottom <= obj2Top || obj1Left >= obj2Right || obj1Top >= obj2Bottom) result = false; return result; }
/*---------------------------------textselect.js--------------------------------------------------*/
以下是使用例子。太晚了，不想写太多了，直接看例子。
<!---------------------------------textselect.htm--------------------------------------------------><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> 下拉输入框整理 </title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""></head><script language="javascript" type="text/javascript" src="textselect.js"></script><body style="font-size:12px"><input type="text" name="" size="10" οnfοcus="javascript:showSelect(this,'select1')"><select name="select1" id="select1" style="display: none" disabled><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select><input type="text" name="" id="a" οnfοcus="javascript:showSelect(this,'select2')"><select name="select2" id="select2" style="display: none" disabled><option value="a">a</option><option value="b">b</option></select><br/><select id="hidden"><option value="i">i</option><option value="j">j</option></select></body></html><!---------------------------------textselect.htm-------------------------------------------------->
本程序在window 2000、IE6及Firefox1.01下测试通过。
闲话：由于写时一脑子激动，有点忘形之意，所以代码有点繁琐，大家有能力的话最好是优化一下后再使用。当然直接使用也不会怎么。另外欢迎各位有手机的朋友到我的“海鱼手机加瓦站(http://wwww.fishjava.com)”来转转，有不少的免费的手机游戏和图片提供给各位，不但可以在线试玩游戏，直接通过WAP下载游戏和图片，还能自己上传一些好玩的游戏或图片上来大家一起来玩。
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=543645
