<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0038)http://172.16.40.6:8080/sgbxt/test.jsp --> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>无标题文档</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <SCRIPT language=javascript> //为保证火狐和ie兼容insertAdjacentHTML 方法 if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement) { HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode) { switch (where) { case 'beforeBegin': this.parentNode.insertBefore(parsedNode,this) break; case 'afterBegin': this.insertBefore(parsedNode,this.firstChild); break; case 'beforeEnd': this.appendChild(parsedNode); break; case 'afterEnd': if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode); break; } } HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var parsedHTML = r.createContextualFragment(htmlStr); this.insertAdjacentElement(where,parsedHTML) } HTMLElement.prototype.insertAdjacentText = function (where,txtStr) { var parsedText = document.createTextNode(txtStr) this.insertAdjacentElement(where,parsedText) } } /** *@description:js多选控件 在ie6 和火狐 3.6上测试通过 *@author:xuejx *@date:20100507 *目前width 只支持 '多少px' ,不支持 '多少%' ,默认和父控件一样宽 *客户端调用方法 var a=new SelectDIV(父节点id,"名称","100px"); a.addOption("江西省","jx"); a.addOption("福建省","fj"); a.addOption("浙江省","zj"); a.setValue('jx;fj');//设置默认值,那么会选中 江西省,福建省 * */ var zindex=1; var SelectDIV=function(fatherID/*父对象*/,name/*名字*/,width /*控件宽度*/){ var parentWidth= document.getElementById(fatherID).offsetWidth; this.name=name; if(''==width){ width = parentWidth; //默认和父控件一样宽 } //如果分割符有变化可以修改这里 SelectDIV.delimiter=';'; //下拉div的css var _cssText=" style='width:"+width+"';" var _cssdiv =" style='width:"+width+";position:absolute;display:none;z-index:50; background: #ffffff; border:1px solid #96C2F1; border:1px solid #96C2F1; font: oblique small-caps bold 12px arial; ' "; var _cssDivButton=" style='width:"+width+" BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid ' "; //实例化控件 this.init=function(){ //判断是否存在 for(i=0;i<SelectDIV.ArrayName.length;i++){ if(SelectDIV.ArrayName[i]==name){ //alert("实例"+name+"已经存在!"); //throw e; } } //文本框 var strInit = new SelectDIV.StringBuild(); //保存text 的文本框id和name都是 'n'+name,保存value的文本框id和name都是 name strInit.push(" <input type='text' id='n"+name+"' name='n"+name+"' readonly='readonly' "+_cssText+" > "); //保存text strInit.push(" <input type='hidden' id='"+name+"' name='"+name+"' value=''>");//保存value /** 下拉框(DIV),dl 是最外边一层的div 其中包括d2用来包含具体内容,d3是放按钮的地方 <div id='d1'+name> <div id='d2'+name></div> <div id='d3'+name>清空,确定</div> </div> */ strInit.push("<div id='d1"+name+"' "+_cssdiv+" align='left'>"); strInit.push("<div id='d2"+name+"'>"); strInit.push("</div>"); strInit.push("<div id='d3"+name+"' style='height:25px;margin-top:2px;margin-bottom:1px; background-color: #E2EAF8; width:100% ;' align='right'>"); strInit.push(" <input "+_cssDivButton+" type='button' id='butClear"+name+"' value='清空'/>"); strInit.push(" <input "+_cssDivButton+" type='button' id='but"+name+"' value='确定'/>"); strInit.push("</div></div>"); if(fatherID!=""){ var fobj=document.getElementById(fatherID); fobj.style.textAlign='left'; //在父控件中靠左对齐 try{ if(fobj==null){ throw "Err1" } fobj.insertAdjacentHTML("beforeEnd",strInit.toString());} catch(e){ if(e=="Err1"){ alert(fatherID+"不存在!"); } } } else{ var divObj = document.createElement("div"); divObj.innerHTML = strInit.toString(); document.body.appendChild(divObj); } this.setCheck();//添加事件 SelectDIV.ArrayName.push(name); if(document.getElementById("d1"+name).style.zIndex>zindex){ zindex=document.getElementById("d1"+name).style.zIndex; } }; this.init(); }; //字符串连接类 SelectDIV.StringBuild = function(){ this.arr = new Array(); this.push = function(str){ this.arr.push(str); }; this.toString = function(){ return this.arr.join(""); }; }; //存储对象到数组 SelectDIV.ArrayName=new Array(); //事件 SelectDIV.IsOK=function(bdiv,tdiv,checks,nname,but,butClear,nvalue,tname){ //清空按钮事件 butClear.οnclick=function(){ nvalue.value=''; //清空value nname.value=''; //清空text //清空checkbox var bdivCheckBox=bdiv.getElementsByTagName('input'); for(var i=0;i<bdivCheckBox.length;i++){ if( bdivCheckBox[i].type=='checkbox'){ bdivCheckBox[i].checked=false; } } if(bdiv.style.display==""){ bdiv.style.display='none'; } } //设置文本框点击事件和却确定按钮点击事件 but.οnclick=nname.οnclick=function (){ bdiv.style.zIndex=++zindex; if(bdiv.style.display==""){ bdiv.style.display='none' nname.value=""; nvalue.value=""; var length=tdiv.getElementsByTagName("input"); if(length==null){ return; } for(i=0;i<length.length;i++){ if( length[i].type=='checkbox' && length[i].checked ==true){ var valueInput=nvalue.value; valueInput=valueInput+length[i].value+SelectDIV.delimiter; nvalue.value=valueInput; var a=length[i].value; var aa=document.getElementById("o"+tname+a); nname.value+=aa.innerHTML+SelectDIV.delimiter; } } if(nvalue.value.length>0){ var strs=nvalue.value.split(SelectDIV.delimiter); var leng=strs.length; nvalue.value=""; for(i=0;i<leng-2;i++){ nvalue.value+=strs[i]+SelectDIV.delimiter; } nvalue.value+=strs[leng-2]; } } else{ var tt=nname; var ttop = tt.offsetTop; //TT控件的定位点高 var thei = tt.clientHeight; //TT控件本身的高 var tleft = tt.offsetLeft; //TT控件的定位点宽 while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;} bdiv.style.top=ttop+thei+6; bdiv.style.left=tleft + 1; var a=tdiv.getElementsByTagName("input");; if(a.length > 7){ tdiv.style.overflowY = "scroll"; tdiv.style.height = 150; } else{ tdiv.style.overflowY = "hidden"; tdiv.style.height = null; } bdiv.style.display=""; } }; }; //设置事件 SelectDIV.prototype.setCheck=function (){ var bdiv= document.getElementById("d1"+this.name); var tdiv= document.getElementById("d2"+this.name); var checks= document.getElementById("a1"+this.name); var nname= document.getElementById("n"+this.name); var nvalue= document.getElementById(this.name); var but= document.getElementById("but"+this.name);//确定按钮 var butClear=document.getElementById("butClear"+this.name);//清空按钮 new SelectDIV.IsOK(bdiv,tdiv,checks,nname,but,butClear,nvalue,this.name); }; //添加元素 SelectDIV.prototype.addOption=function (name,value){ var tdiv=document.getElementById("d2"+this.name); var divInit = new SelectDIV.StringBuild(); divInit.push("<div οnmοuseοver='this.style.backgroundColor=/"#EEF3F7/" ' οnmοuseοut='this.style.backgroundColor=/"#ffffff/" ' οnclick='this.firstChild.checked=!this.firstChild.checked ' style='word-break:keep-all;white-space:nowrap; cursor:hand; border-bottom:1px dashed #8EBAE6; width:100% ' ><input type='checkbox' id='a1"+this.name+"' value='"+value+"'> <span style="word-break:keep-all;" mce_style="word-break:keep-all;" id='o"+this.name+value+"' >"+name+"</span><div>"); tdiv.insertAdjacentHTML("beforeEnd",divInit.toString()); }; //获取值 SelectDIV.prototype.getValue=function (){ return document.getElementById(this.name).value; }; //设置值 SelectDIV.prototype.setValue=function(value){ var bdiv= document.getElementById("d1"+this.name); var tdiv= document.getElementById("d2"+this.name); var checks= document.getElementById("a1"+this.name); var nname= document.getElementById("n"+this.name); var nvalue= document.getElementById(this.name); nname.value='';//清空原来值 nvalue.value=value; //设置checkbox选中 设置text值 var strs=value.split(SelectDIV.delimiter); for(j=0;j<strs.length;j++){ var length=tdiv.getElementsByTagName("input"); if(length==null){ return; } for(i=0;i<length.length;i++){ if( length[i].type=='checkbox' && length[i].value==strs[j]){ length[i].checked=true; var a=length[i].value; var aa=document.getElementById("o"+this.name+a); nname.value+=aa.innerHTML+SelectDIV.delimiter; } } } } </SCRIPT> <SCRIPT> function aaaa(){ alert(a.getValue()) } </SCRIPT> <META content="MSHTML 6.00.2900.5726" name=GENERATOR></HEAD> <BODY> <TABLE style="WIDTH: 100%"> <TBODY> <TR> <TD> </TD> <TD id=dd> </TD></TR> <TR> <TD> </TD> <TD id=ff> </TD></TR></TBODY></TABLE> <SCRIPT> //设置样式传入方式 var a=new SelectDIV("ff","中国人","300px"); a.addOption("江西省","jx"); a.addOption("福建省","fj"); a.addOption("浙江省","zj"); a.addOption("江苏省","js"); a.addOption("辽宁省","ln"); a.addOption("广东省","gd"); a.addOption("西藏自治区","xz"); a.addOption("宁夏回族自治区","nx"); a.addOption("内蒙古自治区","nmg"); a.addOption("广西壮族自治区","gx"); a.addOption("新疆维吾尔自治区","xj"); var b=new SelectDIV("dd","汉族","300px"); b.addOption("布依族","jx"); b.addOption("阿昌族","fj"); b.addOption("白族","zj"); b.addOption("彝族","js"); b.addOption("满族","ln"); b.addOption("回族","gd"); b.setValue('gd;fj;jx;'); </SCRIPT> <br/> <INPUT οnclick=aaaa() type=button value=取得值> <INPUT οnclick="a.setValue('jx;js;xj')" type=button value=设置值> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </BODY></HTML>