带checkbox的下拉列表很好看

来源：互联网发布：江西干部网络管理学院编辑：程序博客网时间：2024/04/28 20:12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><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的cssvar _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都是 namestrInit.push(" <input type='text' id='n"+name+"' name='n"+name+"' readonly='readonly' "+_cssText+" > "); //保存textstrInit.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.onclick=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.onclick=nname.onclick=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 onmouseover='this.style.backgroundColor=/"#EEF3F7/" ' onmouseout='this.style.backgroundColor=/"#ffffff/" ' onclick='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 onclick=aaaa() type=button value=取得值><INPUT onclick="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>

带checkbox的下拉列表 很好看

带checkbox的下拉列表很好看