js模拟SECLECT，用于自定义SELECT样式，遇到个有关问题，帮看看
日期：2014-05-16 浏览次数：20319 次
js模拟SECLECT，用于自定义SELECT样式，遇到个问题，帮看看
遇到的问题是：我要点击下拉菜单中的值后，隐藏下来菜单，问题出在这里：
全部代码如下：
遇到的问题是：我要点击下拉菜单中的值后，隐藏下来菜单，问题出在这里：
- JScript code
VVG.DOM.bindEvent(li,"click",function(event){
var target = event.target || event.srcElement;
iId.value = target.innerHTML;
//alert(ul.innerHTML);
ul.style.display = "none";//这里已经隐藏了，但是怎么没有起作用呢？？？？
});
全部代码如下：
- HTML code
<!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.i
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
