我想实现这种下拉框的效果,不知哪位可以帮帮我 为何我打不开这个URL(http://j2000.vicp.net/non-cgi//usr/2/2_394_9.gif)? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 也不知为什么,也许那个网站不好使了吧,看下面那个吧http://www.yiiboo.com/cgercn/upload/forum14_f_39.gif <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>可输入的下拉框</title><style>button {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}.combo-button { cursor: pointer; cursor: expression("hand"); height: 20px; border: 1px solid rgb(0,0,0); background: rgb(234,242,255); width: 14px;}.combo-hilite { cursor: pointer; cursor: expression("hand"); background: rgb(234,242,255); border: 1px solid rgb(0,0,0); color: black; font-family: verdana; font-size: 9pt;}.combo-item { cursor: pointer; cursor: expression("hand"); background: white; border: 1px solid white; color: black; font-family: verdana; font-size: 9pt;}.combo-input { border: 1px solid rgb(0,0,0) !important; width: 138px !important;}.combo-list-width { width:153px}.combo-list { border: 1px solid black; width: 153px; /*height: 50px; overflow-y: auto; scrollbar-base-color: rgb(234,242,255); scrollbar-highlight-color: rgb(234,242,255); scrollbar-3dlight-color: rgb(0,0,0); scrollbar-darkshadow-color: rgb(255,255,255); scrollbar-shadow-color: rgb(234,242,255); scrollbar-face-color: rgb(234,242,255); scrollbar-track-color: white; scrollbar-arrow-color: black;*/ }</style></head><body><script>Global_run_event_hook = true;Global_combo_array = new Array();Global_ie = document.all != null;Array.prototype.remove=function(dx){ if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=this[i] } } this.length-=1}function ComboBox_make(){ var bt,nm; nm = this.name+"txt"; this.txtview = document.createElement("INPUT") this.txtview.type = "text"; this.txtview.name = nm; this.txtview.id = nm; this.txtview.className = "combo-input" this.view.appendChild(this.txtview); this.valcon = document.createElement("INPUT"); this.valcon.type = "hidden"; this.view.appendChild(this.valcon) var tmp = document.createElement("IMG"); tmp.src = "___"; tmp.style.width = "1px"; tmp.style.height = "0"; this.view.appendChild(tmp); var tmp = document.createElement("BUTTON"); tmp.className = "combo-button"; if(Global_ie){tmp.innerHTML = '<span style="font-family:webdings;font-size:8pt">6</span>';} else{tmp.style.height='24px'} this.view.appendChild(tmp); if(Global_ie) { tmp.onfocus = function () { this.blur(); }; } tmp.onclick = new Function ("", this.name + ".toggle()");}function ComboBox_choose(realval,txtval){ this.value = realval; var samstring = this.name+".view.childNodes[0].value='"+txtval+"'" //alert(samstring) window.setTimeout(samstring,1) //this.view.childNodes[0].value = txtval; this.valcon.value = realval;}function ComboBox_mouseDown(){ var obj,len,el,i; el = window.event.srcElement elcl = el.className if(elcl.indexOf("combo-")!=0) { len=Global_combo_array.length for(i=0;i<len;i++) { curobj = Global_combo_array[i] if(curobj.opslist) { curobj.opslist.style.display='none' } } }}function ComboBox_handleKey(){ var key,obj,eobj,el,strname; eobj = window.event; key = eobj.keyCode; el = eobj.srcElement elcl = el.className if(elcl.indexOf("combo-")==0) { if(elcl.split("-")[1]=="input") { strname = el.id.split("txt")[0] // erik modify //jared modify //obj = window.eval(el.id.split("txt")[0])//obj = window[el.id.split("txt")[0]]; obj = window[strname]; // end erik //end jared obj.expops.length=0 obj.update(); obj.build(obj.expops); if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty else{obj.opslist.style.display='block'} obj.value = el.value; obj.valcon.value = el.value; } }}function ComboBox_update(){ var opart,astr,alen,opln,i,boo; boo=false; opln = this.options.length astr = this.txtview.value alen = astr.length if(alen==0) { for(i=0;i<opln;i++) { this.expops[this.expops.length]=this.options[i];boo=true; } } else { for(i=0;i<opln;i++) { opart=this.options[i].text.substring(0,alen) if(astr==opart) { this.expops[this.expops.length]=this.options[i];boo=true; } } } if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}}function ComboBox_remove(index){ this.options.remove(index)}function ComboBox_add(){ var i,arglen; arglen=arguments.length for(i=0;i<arglen;i++) { this.options[this.options.length]=arguments[i] }}'''''接下面''''''''''''''''''''''''''''''''' function ComboBox_build(arr){ var str,arrlen arrlen=arr.length;str='' str +='<table class="combo-list-width" cellpadding=0 cellspacing=0>' //str +='<table cellpadding=0 style="width:153" cellspacing=0>' for(var i=0;i<arrlen;i++) { str += '<tr>' str += '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"' str += 'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" > '+arr[i].text+' </td>' str +='</tr>' } str +='</table>' if(this.opslist){this.view.removeChild(this.opslist);} this.opslist = document.createElement("DIV") this.opslist.innerHTML=str; this.opslist.style.display='none'; this.opslist.className="combo-list" this.opslist.onselectstart=returnFalse; this.view.appendChild(this.opslist); }function ComboBox_toggle(){ if(this.opslist) { if(this.opslist.style.display=="block") { this.opslist.style.display="none" } else { this.update(); this.build(this.options); this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX this.opslist.style.display="block" } } else { this.update(); this.build(this.options); this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX this.opslist.style.display="block" }}function ComboBox(){ if(arguments.length==0) { self.status="ComboBox invalid - no name arg" } this.name = arguments[0]; this.par = arguments[1]||document.body this.view = document.createElement("DIV"); this.view.style.position='absolute'; this.options = new Array(); this.expops = new Array(); this.value = "" this.build = ComboBox_build this.make = ComboBox_make; this.choose = ComboBox_choose; this.add = ComboBox_add; this.toggle = ComboBox_toggle; this.update = ComboBox_update; this.remove = ComboBox_remove; this.make() this.txtview = this.view.childNodes[0] this.valcon = this.view.childNodes[1] this.par.appendChild(this.view) /* var span = document.createElement("SPAN"); span.style.width = "152px"; this.view.parentNode.insertBefore(span, this.view); */ Global_combo_array[Global_combo_array.length]=this; if(Global_run_event_hook){ComboBox_init()}}ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you mustfunction ComboBox_init() { document.body.attachEvent("onkeyup",ComboBox_handleKey) document.body.attachEvent("onmousedown",ComboBox_mouseDown) Global_run_event_hook = false;}function returnFalse(){return false}function ComboBoxItem(text,value){ this.text = text; this.value = value;}</script> <script>dm=new ComboBox("dm")dm.add( new ComboBoxItem("下拉菜单列表项",1), new ComboBoxItem("可下拉选择",2), new ComboBoxItem("也可以手工输入",3), new ComboBoxItem("方便吧...",4) )</script></body> 真的是很复杂,不能用CSS控制吗?不过真的也很佩服你啊 下拉框不能用css控制的没能控制的也就是颜色而已,不过如果你用winxp的话,你可以看到那种风格 <span style="position:absolute"> <select style="margin:-1;background-color:#eeeeee;font-size:12"> <option>abcde <option>12345 </select></span> 这个更象,但是要麻烦一点点:<BODY><input style="background-color:#eeeeee;border-color:black;border-width:1;position:absolute;top:10;width:80"><span style="position:absolute;left:11;top:11"> <select style="margin:-2;background-color:#eeeeee;width:83"> <option>abcde <option>12345 </select></span></BODY> 微调了一下buttom<input style="border-color:black;border-width:1;position:absolute;top:10;width:80;height:21;"><span style="position:absolute;left:11;top:11"> <select style="margin:-2,-2,-3,-2;background-color:#eeeeee;width:83"> <option>abcde <option>12345 </select></span> 原来margin-top在select中的定义不同的,重新调整一下:<input style="border-color:black;border-width:1;position:absolute;top:10;width:80;height:20;"><span style="position:absolute;left:11;top:11"> <select style="margin:-21,-4,-4,-2;background-color:#eeeeee;width:84"> <option>abcde <option>12345 </select></span> 写了一HTC文件(select.htc),可能还不太完善:<SCRIPT LANGUAGE=javascript>var theSelectedIndex=-1;var loading=true;var mDisabled=false;var mReadonly=false;fnCreateHTML(); //Create Objectif(element.disabled){ if(element.disabled!="no") mDisabled=true;}if(element.readonly){ if(element.readonly!="no") mReadonly=true;}function init(){ element.children[0].attachEvent("onkeydown", fnOpenKey) element.children[1].attachEvent('onclick',fnDropdiv); element.children[2].attachEvent('onkeydown',fnHotkey); element.children[2].attachEvent('ondeactivate',fnHideit); element.children[2].attachEvent('onmousemove',fnHoveritem); element.children[2].attachEvent('onclick',fnClick); element.children[2].attachEvent("onselectstart", fnOnSelectStart) element.attachEvent("onpropertychange", fnOnPropertyChange) loading=false; if(mDisabled) element.disabled=mDisabled;// fnPutDisabled(mDisabled); if(mReadonly) element.readonly=mReadonly;//fnPutReadonly(mReadonly); for(var i=0; i<element.children[2].children.length; i++){ if(element.children[2].children[i].selected){ theSelectedIndex=i; element.children[0].value=element.children[2].children[theSelectedIndex].innerText; break; } }}function fnOpenKey(){ // if(window.event.altKey==true&&window.event.keyCode==40){ opendrop(); }else if(element.children[2].style.display=='none'){ var goitem=theSelectedIndex; switch(window.event.keyCode){ case 38://UP if(goitem<=0) goitem=element.children[2].children.length-1; else goitem -= 1; fnPutSelectedIndex(goitem); break; case 40://Down if(goitem<0 || goitem==element.children[2].children.length-1) goitem=0; else goitem += 1; fnPutSelectedIndex(goitem); break; } } }function fnCreateHTML(){ var blw=parseInt(element.style.borderLeftWidth); if(isNaN(blw)) blw=0; var brw=parseInt(element.style.borderRightWidth); if(isNaN(brw)) brw=0; var btw=parseInt(element.style.borderTopWidth); if(isNaN(btw)) btw=0; var bbw=parseInt(element.style.borderBottomWidth); if(isNaN(bbw)) bbw=0; var wd=parseInt(element.style.width)-20-blw-brw; if(isNaN(wd)) wd=100; //var ht=parseInt(element.style.height)-btw-bbw; //if(isNaN(ht)) ht=18; ht=16; if((blw==0&&brw==0&&btw==0&&bbw==0)&&element.className=='') element.style.border='black solid 1'; //∵font-family:webdings; element.innerHTML = "<INPUT name='"+element.name+"' value='"+(element.value!=null?element.value:'')+"'" +" maxlength='"+(element.maxlength!=null?element.maxlength:'')+"'" +" style='border:none;width:"+wd+";height:"+ht+";font-size:12px;' class=textbox>" +"<INPUT type=button tabindex=-1 class=button style='border:none;width:20;height:"+ht+";font-size:12px;' value='∵'>" +"<div id=element.children[2] style=\"position:absolute;top:0px;left:0;width:200;height:100;overflow:auto;background-color:white;display:none;border: black 1 solid;cursor:default;font-size:12px;\">" +element.innerHTML +"</div>";}function opendrop(){ var lf=element.offsetLeft; var tp=element.offsetTop+element.offsetHeight+1; var wd=element.offsetWidth; var ht=100; with(element.children[2]){ style.top=tp; style.left=lf; style.width=wd; style.height=ht; style.display='block'; fnFindItem(element.children[0].value); setActive(); }}function fnDropdiv(){ obj=event.srcElement; if(obj.type!='button') return; if(obj.disabled==true) return; opendrop();}function fnFindItem(txt){ for(var i=0; i<element.children[2].children.length; i++){ if(element.children[2].children[i].innerText==txt){ theSelectedIndex=i; fnSetItemStyle(i, true); element.children[2].children[i].scrollIntoView(false); break; } }}//flag=true: set the item style; falg=false:reset the item style;function fnSetItemStyle(itemindex, flag){ if(itemindex<0) return; var obj=element.children[2].children[itemindex]; if(flag){ obj.style.backgroundColor=0x000080; obj.style.color=0xffffff; }else{ obj.style.backgroundColor=''; obj.style.color=''; }} function fnHideit(){ element.children[2].style.display='none'; if(theSelectedIndex>-1){ element.children[2].children[theSelectedIndex].style.backgroundColor=''; element.children[2].children[theSelectedIndex].style.color=''; theSelectedIndex=-1; } element.children[0].setActive(); //focus();}function fnHoveritem(){ var obj=event.srcElement; if(!(obj.tagName=='DIV' && obj.parentElement.tagName=='DIV')) return; if(theSelectedIndex>-1 && element.children[2].children[theSelectedIndex]!=obj){ fnSetItemStyle(theSelectedIndex, false); } theSelectedIndex=obj.sourceIndex-element.children[2].sourceIndex-1; fnSetItemStyle(theSelectedIndex, true);}function fnClick(){ var obj=event.srcElement; if(!(obj.tagName=='DIV' && obj.parentElement.tagName=='DIV')) return; if(element.children[0].value!=obj.innerText){ element.children[0].value=obj.innerText; onChange.fire(); } fnHideit();}function fnHotkey(){ var goitem=theSelectedIndex; switch(window.event.keyCode){ case 27: fnHideit(); break; case 38://UP if(goitem<=0) goitem=element.children[2].children.length-1; else goitem -= 1; fnSetItemStyle(theSelectedIndex, false); fnSetItemStyle(goitem, true); theSelectedIndex = goitem; element.children[2].children[goitem].scrollIntoView(false); break; case 40://Down if(goitem<0 || goitem==element.children[2].children.length-1) goitem=0; else goitem += 1; fnSetItemStyle(theSelectedIndex, false); fnSetItemStyle(goitem, true); theSelectedIndex = goitem; element.children[2].children[goitem].scrollIntoView(false); break; case 13: //event.cancelBubble=true; if(element.children[0].value!=element.children[2].children[theSelectedIndex].innerText){ element.children[0].value=element.children[2].children[theSelectedIndex].innerText; onChange.fire(); } fnHideit(); break; default: return; } window.event.returnValue = false; window.event.cancelBubble = true;}function fnPutValue(xValue){ if(loading) return; element.children[0].value=xValue;}function fnGetValue(){ if(loading) return; return element.children[0].value;}function fnPutSelectedIndex(xValue){ if(loading) return; if(theSelectedIndex!=parseInt(xValue)){ theSelectedIndex=parseInt(xValue); element.children[0].value=element.children[2].children[theSelectedIndex].innerText; onChange.fire(); }}function fnGetSelectedIndex(){ if(loading) return; return theSelectedIndex;}function fnGetLength(){ return element.children[2].children.length;}function fnGetDisabled(){ if(loading) return; return element.children[0].disabled;}function fnPutDisabled(xValue){ if(loading) return; for(var i=0; i<element.children.length; i++) element.children[i].disabled=xValue;}function fnGetReadonly(){ if(loading) return; return element.children[0].readOnly;}function fnPutReadonly(xValue){ if(loading) return; element.children[0].readOnly=xValue; element.children[1].disabled=xValue;}function fnOnSelectStart(){ window.event.returnValue = false; window.event.cancelBubble = true;}function fnOnPropertyChange(){ /*if (window.event.propertyName.substring(0, 5) == 'style'){ switch (window.event.propertyName){ case 'style.BackgroundColor' : break }}*/}//<PUBLIC:ATTACH EVENT="onclick" HANDLER="fnDropdiv"/></SCRIPT><PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="init()" /><PUBLIC:EVENT ID="onChange" NAME="onchange" /><PUBLIC:METHOD NAME="opendrop"/><PUBLIC:PROPERTY NAME="length" GET="fnGetLength" /><PUBLIC:PROPERTY NAME="value" PUT="fnPutValue" GET="fnGetValue" /><PUBLIC:PROPERTY NAME="selectedIndex" PUT="fnPutSelectedIndex" GET="fnGetSelectedIndex" /><PUBLIC:PROPERTY NAME="disabled" PUT="fnPutDisabled" GET="fnGetDisabled" /><PUBLIC:PROPERTY NAME="readonly" PUT="fnPutReadonly" GET="fnGetReadonly" /> 用法:<html xmlns:IE><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title></title><style>@media all{ IE\:SELECT{ behavior: url(/include/htc/select.htc) ; }}</style></head><body>Test<hr><ie:select id="slt" name="slt" value="qbc" style="border:black 1 solid; width:px;" maxlength="10" onchange1="alert('onchange event!');"> <div>11111111</div> <div>22222222</div> <div selected="yes">33333333</div> <div>44444444</div></ie:select></body></html>原代码已全在此,需要更COOL的朋友,自行完善! htc那个不行,样子不对,一点都不一样,不过上面这位任兄可还是真牛,别的都用的层做的,那太麻烦了,很多网页都有这种框,那不是太恐怖了,有没有如上面的兄弟的那种,调用一个HTC什么文件的,在网页上就用CSS引用就可以。谢谢了 关开论坛开发价格 外包 js文件动态导入,项目需要,100分 怎么匹配多个换行为* 新手请教一下怎么把第一项默认打开 相对路径问题,菜鸟求救! 在一个输入框里插入一个张图片,并且显示的是图片,而不是html代码? 刚刚接触B/S模式编程 请问:用javascript 可以得知当前文件(网页)的文件名吗? 请教一个表单提交的问题。 求一个过滤字符串中的<和/>的javascript函数,多谢了 关于文本框只能输入数字一问? 招商引资:关于弹出对话框的问题
http://www.yiiboo.com/cgercn/upload/forum14_f_39.gif
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>可输入的下拉框</title>
<style>
button {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
.combo-button {
cursor: pointer;
cursor: expression("hand");
height: 20px;
border: 1px solid rgb(0,0,0);
background: rgb(234,242,255);
width: 14px;
}
.combo-hilite {
cursor: pointer;
cursor: expression("hand");
background: rgb(234,242,255);
border: 1px solid rgb(0,0,0);
color: black;
font-family: verdana;
font-size: 9pt;
}
.combo-item {
cursor: pointer;
cursor: expression("hand");
background: white;
border: 1px solid white;
color: black;
font-family: verdana;
font-size: 9pt;
}.combo-input {
border: 1px solid rgb(0,0,0) !important;
width: 138px !important;
}.combo-list-width {
width:153px
}.combo-list {
border: 1px solid black;
width: 153px;
/*height: 50px;
overflow-y: auto;
scrollbar-base-color: rgb(234,242,255);
scrollbar-highlight-color: rgb(234,242,255);
scrollbar-3dlight-color: rgb(0,0,0);
scrollbar-darkshadow-color: rgb(255,255,255);
scrollbar-shadow-color: rgb(234,242,255);
scrollbar-face-color: rgb(234,242,255);
scrollbar-track-color: white;
scrollbar-arrow-color: black;*/
}
</style></head><body>
<script>
Global_run_event_hook = true;
Global_combo_array = new Array();
Global_ie = document.all != null;Array.prototype.remove=function(dx)
{
if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}function ComboBox_make()
{
var bt,nm;
nm = this.name+"txt";
this.txtview = document.createElement("INPUT")
this.txtview.type = "text";
this.txtview.name = nm;
this.txtview.id = nm;
this.txtview.className = "combo-input"
this.view.appendChild(this.txtview);
this.valcon = document.createElement("INPUT");
this.valcon.type = "hidden";
this.view.appendChild(this.valcon)
var tmp = document.createElement("IMG");
tmp.src = "___";
tmp.style.width = "1px";
tmp.style.height = "0";
this.view.appendChild(tmp);
var tmp = document.createElement("BUTTON");
tmp.className = "combo-button";
if(Global_ie){tmp.innerHTML = '<span style="font-family:webdings;font-size:8pt">6</span>';}
else{tmp.style.height='24px'}
this.view.appendChild(tmp);
if(Global_ie)
{
tmp.onfocus = function ()
{
this.blur();
};
}
tmp.onclick = new Function ("", this.name + ".toggle()");
}function ComboBox_choose(realval,txtval)
{
this.value = realval;
var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
//alert(samstring)
window.setTimeout(samstring,1)
//this.view.childNodes[0].value = txtval;
this.valcon.value = realval;
}function ComboBox_mouseDown()
{
var obj,len,el,i;
el = window.event.srcElement
elcl = el.className
if(elcl.indexOf("combo-")!=0)
{
len=Global_combo_array.length
for(i=0;i<len;i++)
{
curobj = Global_combo_array[i]
if(curobj.opslist)
{
curobj.opslist.style.display='none'
}
}
}
}function ComboBox_handleKey()
{
var key,obj,eobj,el,strname;
eobj = window.event;
key = eobj.keyCode;
el = eobj.srcElement
elcl = el.className
if(elcl.indexOf("combo-")==0)
{
if(elcl.split("-")[1]=="input")
{
strname = el.id.split("txt")[0]
// erik modify //jared modify
//obj = window.eval(el.id.split("txt")[0])//obj = window[el.id.split("txt")[0]];
obj = window[strname];
// end erik //end jared
obj.expops.length=0
obj.update();
obj.build(obj.expops);
if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty
else{obj.opslist.style.display='block'}
obj.value = el.value;
obj.valcon.value = el.value;
}
}
}function ComboBox_update()
{
var opart,astr,alen,opln,i,boo;
boo=false;
opln = this.options.length
astr = this.txtview.value
alen = astr.length
if(alen==0)
{
for(i=0;i<opln;i++)
{
this.expops[this.expops.length]=this.options[i];boo=true;
}
}
else
{
for(i=0;i<opln;i++)
{
opart=this.options[i].text.substring(0,alen)
if(astr==opart)
{
this.expops[this.expops.length]=this.options[i];boo=true;
}
}
}
if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
}
function ComboBox_remove(index)
{
this.options.remove(index)
}function ComboBox_add()
{
var i,arglen;
arglen=arguments.length
for(i=0;i<arglen;i++)
{
this.options[this.options.length]=arguments[i]
}
}'''''接下面'''''''''''''''''''''''''''''''''
{
var str,arrlen
arrlen=arr.length;str=''
str +='<table class="combo-list-width" cellpadding=0 cellspacing=0>'
//str +='<table cellpadding=0 style="width:153" cellspacing=0>'
for(var i=0;i<arrlen;i++)
{
str += '<tr>'
str += '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"'
str += 'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" > '+arr[i].text+' </td>'
str +='</tr>'
}
str +='</table>'
if(this.opslist){this.view.removeChild(this.opslist);}
this.opslist = document.createElement("DIV")
this.opslist.innerHTML=str;
this.opslist.style.display='none';
this.opslist.className="combo-list"
this.opslist.onselectstart=returnFalse;
this.view.appendChild(this.opslist);
}function ComboBox_toggle()
{
if(this.opslist)
{
if(this.opslist.style.display=="block")
{
this.opslist.style.display="none"
}
else
{
this.update();
this.build(this.options);
this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
this.opslist.style.display="block"
}
}
else
{
this.update();
this.build(this.options);
this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
this.opslist.style.display="block"
}
}function ComboBox()
{
if(arguments.length==0)
{
self.status="ComboBox invalid - no name arg"
} this.name = arguments[0];
this.par = arguments[1]||document.body
this.view = document.createElement("DIV");
this.view.style.position='absolute';
this.options = new Array();
this.expops = new Array();
this.value = "" this.build = ComboBox_build
this.make = ComboBox_make;
this.choose = ComboBox_choose;
this.add = ComboBox_add;
this.toggle = ComboBox_toggle;
this.update = ComboBox_update;
this.remove = ComboBox_remove; this.make()
this.txtview = this.view.childNodes[0]
this.valcon = this.view.childNodes[1]
this.par.appendChild(this.view)
/*
var span = document.createElement("SPAN");
span.style.width = "152px";
this.view.parentNode.insertBefore(span, this.view);
*/
Global_combo_array[Global_combo_array.length]=this;
if(Global_run_event_hook){ComboBox_init()}
}ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you mustfunction ComboBox_init()
{
document.body.attachEvent("onkeyup",ComboBox_handleKey)
document.body.attachEvent("onmousedown",ComboBox_mouseDown)
Global_run_event_hook = false;
}function returnFalse(){return false}function ComboBoxItem(text,value)
{
this.text = text;
this.value = value;
}
</script>
<script>dm=new ComboBox("dm")dm.add(
new ComboBoxItem("下拉菜单列表项",1),
new ComboBoxItem("可下拉选择",2),
new ComboBoxItem("也可以手工输入",3),
new ComboBoxItem("方便吧...",4)
)</script>
</body>
<select style="margin:-1;background-color:#eeeeee;font-size:12">
<option>abcde
<option>12345
</select>
</span>
<input style="background-color:#eeeeee;border-color:black;border-width:1;position:absolute;top:10;width:80">
<span style="position:absolute;left:11;top:11">
<select style="margin:-2;background-color:#eeeeee;width:83">
<option>abcde
<option>12345
</select>
</span>
</BODY>
<input style="border-color:black;border-width:1;position:absolute;top:10;width:80;height:21;">
<span style="position:absolute;left:11;top:11">
<select style="margin:-2,-2,-3,-2;background-color:#eeeeee;width:83">
<option>abcde
<option>12345
</select>
</span>
<span style="position:absolute;left:11;top:11">
<select style="margin:-21,-4,-4,-2;background-color:#eeeeee;width:84">
<option>abcde
<option>12345
</select>
</span>
var theSelectedIndex=-1;
var loading=true;
var mDisabled=false;
var mReadonly=false;fnCreateHTML(); //Create Objectif(element.disabled){
if(element.disabled!="no") mDisabled=true;
}
if(element.readonly){
if(element.readonly!="no") mReadonly=true;
}
function init(){
element.children[0].attachEvent("onkeydown", fnOpenKey)
element.children[1].attachEvent('onclick',fnDropdiv);
element.children[2].attachEvent('onkeydown',fnHotkey);
element.children[2].attachEvent('ondeactivate',fnHideit);
element.children[2].attachEvent('onmousemove',fnHoveritem);
element.children[2].attachEvent('onclick',fnClick);
element.children[2].attachEvent("onselectstart", fnOnSelectStart)
element.attachEvent("onpropertychange", fnOnPropertyChange)
loading=false; if(mDisabled) element.disabled=mDisabled;// fnPutDisabled(mDisabled);
if(mReadonly) element.readonly=mReadonly;//fnPutReadonly(mReadonly); for(var i=0; i<element.children[2].children.length; i++){
if(element.children[2].children[i].selected){
theSelectedIndex=i;
element.children[0].value=element.children[2].children[theSelectedIndex].innerText;
break;
}
}
}function fnOpenKey(){
//
if(window.event.altKey==true&&window.event.keyCode==40){
opendrop();
}else if(element.children[2].style.display=='none'){
var goitem=theSelectedIndex;
switch(window.event.keyCode){
case 38://UP
if(goitem<=0) goitem=element.children[2].children.length-1;
else goitem -= 1;
fnPutSelectedIndex(goitem);
break;
case 40://Down
if(goitem<0 || goitem==element.children[2].children.length-1) goitem=0;
else goitem += 1;
fnPutSelectedIndex(goitem);
break;
}
}
}function fnCreateHTML(){
var blw=parseInt(element.style.borderLeftWidth);
if(isNaN(blw)) blw=0;
var brw=parseInt(element.style.borderRightWidth);
if(isNaN(brw)) brw=0;
var btw=parseInt(element.style.borderTopWidth);
if(isNaN(btw)) btw=0;
var bbw=parseInt(element.style.borderBottomWidth);
if(isNaN(bbw)) bbw=0;
var wd=parseInt(element.style.width)-20-blw-brw;
if(isNaN(wd)) wd=100;
//var ht=parseInt(element.style.height)-btw-bbw;
//if(isNaN(ht)) ht=18;
ht=16;
if((blw==0&&brw==0&&btw==0&&bbw==0)&&element.className=='') element.style.border='black solid 1';
//∵font-family:webdings;
element.innerHTML = "<INPUT name='"+element.name+"' value='"+(element.value!=null?element.value:'')+"'"
+" maxlength='"+(element.maxlength!=null?element.maxlength:'')+"'"
+" style='border:none;width:"+wd+";height:"+ht+";font-size:12px;' class=textbox>"
+"<INPUT type=button tabindex=-1 class=button style='border:none;width:20;height:"+ht+";font-size:12px;' value='∵'>"
+"<div id=element.children[2] style=\"position:absolute;top:0px;left:0;width:200;height:100;overflow:auto;background-color:white;display:none;border: black 1 solid;cursor:default;font-size:12px;\">"
+element.innerHTML
+"</div>";
}
function opendrop(){
var lf=element.offsetLeft;
var tp=element.offsetTop+element.offsetHeight+1;
var wd=element.offsetWidth;
var ht=100;
with(element.children[2]){
style.top=tp;
style.left=lf;
style.width=wd;
style.height=ht;
style.display='block';
fnFindItem(element.children[0].value);
setActive();
}
}function fnDropdiv(){
obj=event.srcElement;
if(obj.type!='button') return;
if(obj.disabled==true) return;
opendrop();
}function fnFindItem(txt){
for(var i=0; i<element.children[2].children.length; i++){
if(element.children[2].children[i].innerText==txt){
theSelectedIndex=i;
fnSetItemStyle(i, true);
element.children[2].children[i].scrollIntoView(false);
break;
}
}
}//flag=true: set the item style; falg=false:reset the item style;
function fnSetItemStyle(itemindex, flag){
if(itemindex<0) return;
var obj=element.children[2].children[itemindex];
if(flag){
obj.style.backgroundColor=0x000080;
obj.style.color=0xffffff;
}else{
obj.style.backgroundColor='';
obj.style.color='';
}
}
element.children[2].style.display='none';
if(theSelectedIndex>-1){
element.children[2].children[theSelectedIndex].style.backgroundColor='';
element.children[2].children[theSelectedIndex].style.color='';
theSelectedIndex=-1;
}
element.children[0].setActive(); //focus();
}function fnHoveritem(){
var obj=event.srcElement;
if(!(obj.tagName=='DIV' && obj.parentElement.tagName=='DIV')) return;
if(theSelectedIndex>-1 && element.children[2].children[theSelectedIndex]!=obj){
fnSetItemStyle(theSelectedIndex, false);
}
theSelectedIndex=obj.sourceIndex-element.children[2].sourceIndex-1;
fnSetItemStyle(theSelectedIndex, true);
}function fnClick(){
var obj=event.srcElement;
if(!(obj.tagName=='DIV' && obj.parentElement.tagName=='DIV')) return;
if(element.children[0].value!=obj.innerText){
element.children[0].value=obj.innerText;
onChange.fire();
}
fnHideit();
}function fnHotkey(){
var goitem=theSelectedIndex;
switch(window.event.keyCode){
case 27:
fnHideit();
break;
case 38://UP
if(goitem<=0) goitem=element.children[2].children.length-1;
else goitem -= 1;
fnSetItemStyle(theSelectedIndex, false);
fnSetItemStyle(goitem, true);
theSelectedIndex = goitem;
element.children[2].children[goitem].scrollIntoView(false);
break;
case 40://Down
if(goitem<0 || goitem==element.children[2].children.length-1) goitem=0;
else goitem += 1;
fnSetItemStyle(theSelectedIndex, false);
fnSetItemStyle(goitem, true);
theSelectedIndex = goitem;
element.children[2].children[goitem].scrollIntoView(false);
break;
case 13:
//event.cancelBubble=true;
if(element.children[0].value!=element.children[2].children[theSelectedIndex].innerText){
element.children[0].value=element.children[2].children[theSelectedIndex].innerText;
onChange.fire();
}
fnHideit();
break;
default:
return;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}function fnPutValue(xValue){
if(loading) return;
element.children[0].value=xValue;
}
function fnGetValue(){
if(loading) return;
return element.children[0].value;
}function fnPutSelectedIndex(xValue){
if(loading) return;
if(theSelectedIndex!=parseInt(xValue)){
theSelectedIndex=parseInt(xValue);
element.children[0].value=element.children[2].children[theSelectedIndex].innerText;
onChange.fire();
}
}
function fnGetSelectedIndex(){
if(loading) return;
return theSelectedIndex;
}
function fnGetLength(){
return element.children[2].children.length;
}function fnGetDisabled(){
if(loading) return;
return element.children[0].disabled;
}
function fnPutDisabled(xValue){
if(loading) return;
for(var i=0; i<element.children.length; i++) element.children[i].disabled=xValue;
}function fnGetReadonly(){
if(loading) return;
return element.children[0].readOnly;
}
function fnPutReadonly(xValue){
if(loading) return;
element.children[0].readOnly=xValue;
element.children[1].disabled=xValue;
}function fnOnSelectStart(){
window.event.returnValue = false;
window.event.cancelBubble = true;
}function fnOnPropertyChange(){
/*if (window.event.propertyName.substring(0, 5) == 'style'){
switch (window.event.propertyName){
case 'style.BackgroundColor' :
break
}}*/
}
//<PUBLIC:ATTACH EVENT="onclick" HANDLER="fnDropdiv"/></SCRIPT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="init()" />
<PUBLIC:EVENT ID="onChange" NAME="onchange" />
<PUBLIC:METHOD NAME="opendrop"/>
<PUBLIC:PROPERTY NAME="length" GET="fnGetLength" />
<PUBLIC:PROPERTY NAME="value" PUT="fnPutValue" GET="fnGetValue" />
<PUBLIC:PROPERTY NAME="selectedIndex" PUT="fnPutSelectedIndex" GET="fnGetSelectedIndex" />
<PUBLIC:PROPERTY NAME="disabled" PUT="fnPutDisabled" GET="fnGetDisabled" />
<PUBLIC:PROPERTY NAME="readonly" PUT="fnPutReadonly" GET="fnGetReadonly" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
@media all{
IE\:SELECT{
behavior: url(/include/htc/select.htc) ;
}
}
</style>
</head>
<body>
Test
<hr>
<ie:select id="slt" name="slt" value="qbc" style="border:black 1 solid; width:px;" maxlength="10" onchange1="alert('onchange event!');">
<div>11111111</div>
<div>22222222</div>
<div selected="yes">33333333</div>
<div>44444444</div>
</ie:select>
</body>
</html>
原代码已全在此,需要更COOL的朋友,自行完善!