js模拟SECLECT，用于自定义SELECT样式，遇到个问题，帮看看

aihua17 2012-03-31 04:40:00

遇到的问题是：我要点击下拉菜单中的值后，隐藏下来菜单，问题出在这里：



VVG.DOM.bindEvent(li,"click",function(event){

					var target = event.target || event.srcElement;

					iId.value = target.innerHTML;

					//alert(ul.innerHTML);

					ul.style.display = "none";//这里已经隐藏了，但是怎么没有起作用呢？？？？

				});

全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

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

<title>下拉菜单样式模拟，模拟下拉菜单</title>

<style type="text/css">

*{margin:0;padding:0;}

#warper{ margin:20px; position:relative;}

#warper ul{list-style:none; margin: 0; padding:0;}

#warper ul li{line-height:20px; cursor:pointer; margin:1px 0; font-size:12px; text-indent:5px;}

.inputbox{width:128px; height:23px; line-height:23px; background: #ccc url(http://img.allinbuy.cn/WebResources/WSTL/Images/shopping/point/slt.gif) no-repeat; border:none;  font-size:12px; text-indent:5px;}

</style>

</head>

<body>

<div id="warper">

	<select name="" id="select" style="display:none;">

		<option value="北京" selected>北京</option>

		<option value="上海">上海</option>

		<option value="重庆">重庆</option>

		<option value="成都">成都</option>

		<option value="杭州">杭州</option>

		<option value="南京">南京</option>

	</select>	

	<input type="text" id="input" class="inputbox" value="北京" disabled />	

</div>

<script type="text/javascript">

var VVG = {};

VVG.DOM = {};

VVG.DOM.bindEvent = function(element,type,func){

	if(element.addEventListener){

		element.addEventListener(type,func,false);  //false 表示冒泡

	}else if(element.attachEvent){

		element.attachEvent("on"+type,func)

	}else{

		element["on"+ type] = func;

	}

};

VVG.DOM.unbindEvent = function(element,type,func){

	if(element.removeEventListener){

		element.removeEventListener(type,func,false);

	}else if(element.detachEvent){

		element.detachEvent("on"+type,func);

	}else{

		element["on"+type] = null;

	}

};

VVG.Selector = function(o){

	this.selectId = o.selectId;

	this.inputId = o.inputId;

	this.warperId = o.warperId;

}

VVG.Selector.prototype = {

	checkArguments : function(){

		if(this.selectId&&this.inputId&&this.warperId){

			return true;

		}else{

			alert("传入的ID参数为空或者格式不正确！");

			return false;

		}

	},

	createUl : function(){

		if(this.checkArguments()){

			var sId  = document.getElementById(this.selectId);

			var iId   = document.getElementById(this.inputId);

			var iIdWidth = iId.offsetWidth;

			var iIdHeight = iId.offsetHeight;

			// console.log(iIdWidth + " " + iIdHeight);

			var wId = document.getElementById(this.warperId);

			var sArr = [];

			var options = sId.getElementsByTagName("option"); 

			var ul = document.createElement("ul");

			for(var i = 0, n = options.length; i<n;i++){

				var li = document.createElement("li");

				li.innerHTML = options[i].value;

				VVG.DOM.bindEvent(li,"mouseover",function(event){					

					var target = event.target || event.srcElement;

					target.style.backgroundColor = "blue";

					target.style.color = "#fff";

				});

				VVG.DOM.bindEvent(li,"mouseout",function(event){

					var target = event.target || event.srcElement;

					target.setAttribute("style",""); //若只设此处对IE6无效

					target.removeAttribute("style"); //若只设此处则对谷歌浏览器无效，很奇怪啊

				});

				VVG.DOM.bindEvent(li,"click",function(event){

					var target = event.target || event.srcElement;

					iId.value = target.innerHTML;

					//alert(ul.innerHTML);

					ul.style.display = "none";

				});							

				ul.appendChild(li);



			}

			wId.appendChild(ul);			

			var cssStr = "display:none;position:absolute;width:"+ (iIdWidth-2) + "px;left:0;top:"+iIdHeight+"px;border:1px solid #ccc;";

			ul.style.cssText = cssStr;

			VVG.DOM.bindEvent(wId,"click", function(){

				ul.style.display = "block";

			});

		}

	}

}

var selector1 = new VVG.Selector({

	selectId:"select",

	inputId:"input",

	warperId:"warper"

})

selector1.createUl();

</script>

</body>

</html>

...全文

269 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

aihua17 2012-03-31

打赏
举报

弄好了！
见博客：http://www.cnblogs.com/NNUF/archive/2012/03/31/2427454.html

aihua17 2012-03-31

打赏
举报

这样赋值给input不知道提交的时候是不是对的

还在加载中灬 2012-03-31

打赏
举报

记得 return false 就能防止冒泡。。

aihua17 2012-03-31

打赏
举报

还有这两个事件同时触发了，因为li包含在wId里面，点击li的时候也点击了wId
VVG.DOM.bindEvent(li,"click",function(event){
var target = event.target || event.srcElement;
iId.value = target.innerHTML;
//alert(ul.innerHTML);
ul.style.display = "none";
});

VVG.DOM.bindEvent(wId,"click", function(){
ul.style.display = "block";
});

aihua17 2012-03-31