高手进来看看JS在FF下的问题

cavey 2011-03-01 05:58:47
在CSDN下了个老版本的多选下拉框(JS+DIV)，改改还能用啊，但IETEST用IE6以及在FF下杯具了，哪信牛哥帮来改改，我只要一个多选就好啦，分不多了啊。哈哈





<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script language="javascript">

/**

	复选下拉框

	@author:YCF

	2009.1.9

**/

var zindex=1;

var SelectDIV=function(fatherID/*父对象*/,name/*名字*/,css/*样式*/,clew/*图片提示内容*/){

	this.DIVvalue="";

	this.name=name;

	this.css=css;//是否有样式

	this.owidth = "100px"; //option的宽度

	this.cwidth = "30px"	//checkbox的宽度

	//实例化控件

	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();

		strInit.push("<input type='text' style='width:300px' name='n"+name+"' readonly='readonly'>");

		strInit.push(" <input type='hidden'  id='id"+name+"' value=''>");

		//strInit.push(" ");

		strInit.push("<img src='../../img/common/query.gif' alt='"+clew+"' width='16' height='16' align='absmiddle' id='img"+name+"'>");

		//alert(document.getElementById(fatherID));

		if(fatherID!=""){

			var fobj=document.getElementById(fatherID);

			

			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);

		}	

		//实例化下拉框（DIV）

		var divInit = new SelectDIV.StringBuild();

		divInit.push("<div id='d1"+name+"' style='position:absolute;display:none;z-index:50;width:300px; background: #ffffff;' align='left'>");

		divInit.push("<div id='d2"+name+"'>");

		divInit.push("</div>");

		divInit.push("<div id='d3"+name+"' style='height:25px;width:300px;margin-top:2px;margin-bottom:1px;' align='right'>");

		divInit.push(" <input style='width:60px' class='input' type='button' id='but"+name+"' value='确  定'/>");

		divInit.push("</div></div>");

		var divObj = document.createElement("div");

		divObj.innerHTML = divInit.toString();

		document.body.appendChild(divObj);

		this.setCheck();

		this.setImg();

		//设置样式

		this.setCss();

		SelectDIV.ArrayD.push(document.getElementById("d1"+name));

		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("");

	};

};

//存储DIV到数组

SelectDIV.ArrayD = new Array();

//存储对象到数组

SelectDIV.ArrayName=new Array();

//事件

SelectDIV.IsOK=function(bdiv,tdiv,checks,nname,but,img,nvalue,tname){

		but.onclick=img.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].checked ==1){

					nvalue.value+=length[i].value+",";

					var a=length[i].value;

					var aa=document.getElementById("o"+tname+a);

					nname.value+=aa.value+";";	

				}

			}

			if(nvalue.value.length>0){

				var strs=nvalue.value.split(",");

				var leng=strs.length;

				nvalue.value="";

				for(i=0;i<leng-2;i++){

					nvalue.value+=strs[i]+",";

				}

				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;

			//document.all.d1.style.width=document.all.textfield.width;

			var a=tdiv.getElementsByTagName("input");;

			//document.all.d1.style.z-index='1';

			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 but=document.getElementById("but"+this.name);

		var img=document.getElementById("img"+this.name);

		var nvalue=document.getElementById("id"+this.name);

		new SelectDIV.IsOK(bdiv,tdiv,checks,nname,but,img,nvalue,this.name);

	};

//添加元素

SelectDIV.prototype.addOption=function (name,value){

	var tdiv=document.getElementById("d2"+this.name);

	var divInit = new SelectDIV.StringBuild();

	divInit.push("<input type='checkbox' id='a1"+this.name+"' style='width:50px;' value='"+value+"'> <option id='o"+this.name+value+"' value='"+name+"'  style='");

	divInit.push("width: "+this.owidth+";'>"+name+"</option><br/>");

	tdiv.insertAdjacentHTML("beforeEnd",divInit.toString());

};

//获取值

SelectDIV.prototype.getValue=function (){

	return document.getElementById("id"+this.name).value;

};

//初始化设置图片

SelectDIV.prototype.setImg=function (){

	if(typeof this.css != "undefined"){

	if(typeof this.css.img != "undefined")

		var img=document.getElementById("img"+this.name).src=this.css.img;	

	}

};

//设置样式

SelectDIV.prototype.setCss=function (){

		var obj = document.getElementById("d1"+this.name);

		var tdiv=document.getElementById("d2"+this.name);

		var thdiv=document.getElementById("d3"+this.name);

		var nname=document.getElementById("n"+this.name);

		var but=document.getElementById("but"+this.name);

		var img=document.getElementById("img"+this.name);

	if(typeof this.css != "undefined"){	

		if(typeof this.css.width != "undefined"){

			var nwidth=parseInt(this.css.width);

			var widthdw=this.css.width.substring(this.css.width.length-2);

			obj.style.width = nwidth*0.9+widthdw;	

			tdiv.style.width = nwidth*0.9+widthdw;

			thdiv.style.width = nwidth*0.9+widthdw;

			nname.style.width = nwidth*0.9+widthdw;

			//but.style.width = nwidth*0.2+widthdw;

			//img.style.width = nwidth*0.2+widthdw;

			this.cwidth=nwidth*0.25+widthdw;

			this.owidth=nwidth*0.7+widthdw;

		}

		if(typeof this.css.height != "undefined"){

			var nheight=parseInt(this.css.height);

			var heightdw=this.css.height.substring(this.css.height.length-2)

			obj.style.height = this.css.height; 

			tdiv.style.height = this.css.height;

			nname.style.height = nheight*0.9+heightdw;

			//but.style.height = nheight*0.2+heightdw;

		}

		if(typeof this.css.zindex != "undefined"){

			obj.style.zIndex=this.css.zindex;

		}

	}

};

	</script>

	<script>

		function aaaa(){

			alert(a.getValue())

		}

	</script>

</head>



<body >

<table>

<tr>

		<td>     </td>

		<td id="dd"> </td>

	</tr>

	<tr>

		<td>     </td>

		<td id="ff"> </td>

	</tr>

	

</table>

	<script>

	//设置样式传入方式

	var a=new SelectDIV("ff","中国人",{width:"1000px",img:"darrow.gif",zindex:66},"");

	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","汉族","","");

	b.addOption("江西省","jx");

	b.addOption("福建省","fj");

	b.addOption("浙江省","zj");

	b.addOption("江苏省","js");

	b.addOption("辽宁省","ln");

	b.addOption("广东省","gd");

	</script>

	<input type="button" value="取得值" onclick="aaaa()">

</body>

</html>
...全文
67 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
cavey 2011-03-02
  • 打赏
  • 举报
 回复
哈哈，那我再找找，见者有分
kaifadi 2011-03-01
  • 打赏
  • 举报
 回复
我也属于技术成长阶段。哎。这个过程好漫长！
gouxiongyaya 2011-03-01
  • 打赏
  • 举报
 回复
这。。。看的人脑袋都大了
碧海情天-赵亮 2011-03-01
  • 打赏
  • 举报
 回复
同意1楼。这样的代码就不要看了，去找别的好了。
Mr-Jee 2011-03-01
  • 打赏
  • 举报
 回复
你找
autocomplete 或者是js suggest
随便哪一个也比这个强啊。
我估计作者当时写的时候处于技术的成长阶段，但是其中充斥了的代码实在让人。。。
DIV CSS设计时IE6-IE7-FF 兼容性问题..._1326
正在网站设计的时分，当当注意css样式兼容不同阅读器答题，特殊是对于完整使用DIV CSS设计的网，便应当更注意IE6 IE7 FF对于CSS样式的兼容，没有然，您的网治能够进来不念呈现的后果！ 一切涉猎器 通用 ...
关于IE浏览器加载外部js注意事项
几年前，我还是一个做Java的程序猿，虽然说不上是高手，起码对JavaWeb相关技术有一定的了解，写一些前端的html或js没什么问题，几乎也没遇到过问题，不过已经转行n年了，Java的事已经忘记的一干二净了，一旦遇到点...
攻防世界-web高手进阶区
攻防世界-web高手进阶区 提示：这里是记录web的题目，这里我基本不讲很多细节，请自行下载Burpsuite，web使用的等等工具。 一、baby_web 非常的简单，bp抓包直接把1.php去掉后，就看的flag了。 二、Training-...
JS只能输入数字和小数点
javascript 替换函数全部替换方法 &...//在此我想将字母a替换成字母Aalert(strM.replace("a","A"));&lt;/script&gt;只能替换第一个“a”字母&lt;script
《从案例中学习JavaScript》之实现网页版阅读器
###序 现在手机上的文本阅读app...而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。 岁月在流逝，时代在进步。 愿放下所有的浮躁，在新的时代愉快地生活，无所谓
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章