js可编辑下拉菜单——树成原创

/* 作者：Persegrand.Spiniper(树成) 编写时间：2008年8月10日 版本：1.1 */ /* 可编辑下拉菜单控件，此控件只对input元素 的text控件有效 添加控件先引入editselect.js文件，然后使用initEs方法放入onLoad事件内初始化控件 在元素中添加isselect属性来说明此控件为可编辑下拉菜单，属性中的值指向控件承载数据元素的id 控件承载数据元素为一组div元素，isselect属性指向的是父div元素，子div元素放入值。 例如<input id="usercode" type="text" name="usercode" isselect="esusercode"/> <div id="esusercode"> <div id="1">我们爱你</div> <div id="2">我很爱你</div> <div id="3">我们在一起</div> <div id="4">这是一个程序</div> <div id="5">js总是那么令人兴奋</div> </div> 其中id为usercode的text控件中有isselect属性，其值为esusercode，指向承载数据div的id 子div中元素主体存放显示值，id存放提交值，相当于option属性的value */ /* 该控件以发现且为解决缺陷： 1、点击下拉单的滚动条然后失去焦点不会使下拉单消失。 2、显示长度过长会出现换行现象，没有进行字符串截取。 3、现实效果并不完全像下拉菜单； 4、对于字符宽度调制存在缺陷； 如果有其他bug出现请邮件至spiniper@126.com */ /* 版本1.1升级： 1、对firefox以及dom型浏览器支持（测试环境firefox3.04）。 */ function initES(){ var edselects=document.getElementsByTagName("INPUT"); for(var i=0;i<edselects.length;i++){ if(edselects[i].type=="text"&&edselects[i].getAttribute("isselect")){ var es=new EditSelect(edselects[i].id); es.getselects(); es.createvalueobj(); i++; var selectdataid=document.getElementById(edselects[i].getAttribute("isselect")); if(window.attachEvent){ selectdataid.style.display="none"; selectdataid.style.position="absolute"; selectdataid.style.backgroundColor="white"; selectdataid.style.border="solid 1px"; selectdataid.style.overflowY="auto"; selectdataid.style.overflowX="hidden"; selectdataid.style.fontSize="14px"; selectdataid.style.height="150px" addListener(edselects[i],"blur",function(){hidendiv()},false); }else{ addListener(edselects[i],"blur",function(){hidendiv()},false); var fstyle="display:none"; //fstyle+=";display:none"; fstyle+="; position:absolute"; fstyle+="; background-color:white"; fstyle+="; border:solid 1px"; fstyle+="; overflow-y:auto"; fstyle+="; overflow-x:hidden"; fstyle+="; font-size:14px"; fstyle+="; height:150px"; selectdataid.setAttribute("style",fstyle); selectdataid.setAttribute("isselect",edselects[i].id); es.divstyle=fstyle; //addListener(selectdataid,"mouseover",function(){removeListener(document.getElementById(getEventSrc().getAttribute("isselect")),"blur",function(){hidendiv()},false);},false); //addListener(selectdataid,"mouseout",function(){addListener(document.getElementById(getEventSrc().getAttribute("isselect")),"blur",function(){hidendiv()},false);},false); } edselects[i].esobj=es; addListener(edselects[i],"keyup",function(){es.autoshow()},false); //addListener(edselects[i],"blur",function(){hidendiv()},false); addListener(edselects[i],"focus",function(){showdiv()},false); //edselects[i].attachEvent("onkeyup",function(){es.autoshow()}); //edselects[i].attachEvent("onblur",function(){hidendiv()}); //edselects[i].attachEvent("onfocus",function(){showdiv()}); edselects[i].autocomplete="off"; } } } function EditSelect(sid){ this.divstyle=""; this.attribute="value"; this.overbgcolor="blue"; this.overcolor="white"; this.outbgcolor="white"; this.outcolor="black"; this.lables=new Array();//显示值 //this.dovalues=new Array(); //this.overs=new Array(); //this.outs=new Array(); this.edvalues=new Array();//真实值 this.selectid=sid;//可编辑下拉菜单的id this.selectdataid=document.getElementById(sid).getAttribute("isselect");//可编辑下拉菜单数据 this.selectvalueid;//可编辑下拉菜单提交值 var eddiv=document.getElementById(this.selectdataid); //eddiv.style.display="none"; } EditSelect.prototype.getselects=function(){ var eddiv=document.getElementById(this.selectdataid).getElementsByTagName("DIV"); for(var i=0;i<eddiv.length;i++){ this.lables[i]=eddiv[i].innerHTML; this.edvalues[i]=eddiv[i].getAttribute(this.attribute); } } EditSelect.prototype.createvalueobj=function(){ var obj=document.getElementById(this.selectid).parentNode; var sobj=document.getElementById(this.selectid); sobj.id="eshid"+this.selectid; sobj.name="eshid"+sobj.name; obj.innerHTML="<input id=\""+this.selectid+"\" type=\"hidden\" name=\""+this.selectid+"\">"+obj.innerHTML; this.selectvalueid=this.selectid; this.selectid="eshid"+this.selectid; } EditSelect.prototype.autoshow=function(){ var obj=getEventSrc(); var es=obj.esobj; var edselect=document.getElementById(es.selectid); var edselectvalue=document.getElementById(es.selectvalueid); var eddiv=document.getElementById(es.selectdataid); var j=0; eddiv.innerHTML=""; if(edselect.value==""){ for(var i=0;i<es.edvalues.length;i++){ var edselectoption=document.createElement("DIV"); addListener(edselectoption,"click",function(){selected(es)},false); //edselectoption.attachEvent("onclick",function(){selected(es)}); edselectoption.innerHTML=es.lables[i]; edselectoption.setAttribute(this.attribute,es.edvalues[i]); j++; addListener(edselectoption,"mouseover",function(){overcolor(es)},false); addListener(edselectoption,"mouseout",function(){outcolor(es)},false); //edselectoption.attachEvent("onmouseover",function(){overcolor(es)}); //edselectoption.attachEvent("onmouseout",function(){outcolor(es)}); eddiv.appendChild(edselectoption); } }else{ for(var i=0;i<es.lables.length;i++){ if(es.edvalues[i].indexOf(edselect.value)!=-1||es.lables[i].indexOf(edselect.value)!=-1){ var edselectoption=document.createElement("DIV"); addListener(edselectoption,"click",function(){selected(es)},false); //edselectoption.attachEvent("onclick",function(){selected(es)}); edselectoption.innerHTML=es.lables[i]; edselectoption.setAttribute(this.attribute,es.edvalues[i]); addListener(edselectoption,"mouseover",function(){overcolor(es)},false); addListener(edselectoption,"mouseout",function(){outcolor(es)},false); //edselectoption.attachEvent("onmouseover",function(){overcolor(es)}); //edselectoption.attachEvent("onmouseout",function(){outcolor(es)}); eddiv.appendChild(edselectoption); j++; } } } //此处还有待修改************************************************************ if(j<10){ eddiv.style.height=(parseInt(j)*16.8)+"px";} else{ eddiv.style.height="150px";} } function overcolor(es){ var obj=getEventSrc(); obj.style.background=es.overbgcolor; obj.style.color=es.overcolor; var isselect=document.getElementById(es.selectid); //if(obj.removeEventListener){ /// isselect.removeEventListener("blur",function(){hidendiv()},false); //} } function outcolor(es){ var obj=getEventSrc(); obj.style.background=es.outbgcolor; obj.style.color=es.outcolor; var isselect=document.getElementById(es.selectid); //if(obj.addEventListener){ // isselect.addEventListener("blur",function(){hidendiv()},false); //} } function selected(es){ var obj=getEventSrc(); var edselect=document.getElementById(es.selectid); var edselectvalue=document.getElementById(es.selectvalueid); edselect.value=obj.innerHTML; edselectvalue.value=obj.getAttribute(es.attribute); obj.parentNode.style.display="none"; } function showdiv(){ var obj=getEventSrc(); var edselect=documen