带chekcbox功能的上拉框 _Web前端

带chekcbox功能的下拉框

最近在做项目中需要用到带Checkbxo的下拉框,如下图所示：

HTML页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
	.checkboxselect-container{border:1px solid #33CCFF;
		//visibility:visible;
		visibility:hidden;
		background:white;}
	.checkboxselect-item{padding:3px 2px;}
	.checkboxselect-active{background:#33CCFF;color:white;padding:3px 2px;}	
</style>
<script type="text/javascript" src="checkboxSelect.js"></script>
<script type="text/javascript">
	window.onload = function(){	
		var checkboxSelect = new CheckboxSelect({
			input:document.getElementById('checkboxSelect'),
			hiddeninput:document.getElementById('hiddencheckboxSelect'),
			width:150,
			opacity:0.9,
			data:['北京','上海','南京'],
		});		
	}
</script>
</head>
<body>
	所选地区：<input type="text" id="checkboxSelect" name="checkboxSelect" style="width: 250px;"></input>
	所选地区所对应的ID值：<input type="text" id="hiddencheckboxSelect" name="hiddencheckboxSelect" style="width:250px;"></input>
	<br/>
</body>
</html>

checkboxSelect.js代码：
<pre name="code" class="javascript">/**
 * JavaScript CheckboxSelect v0.1
 * Copyright (c) 2012 fly2004jun
 * Blog: http://blog.csdn.net/fly2004jun
 * Date: 2012-07-02
 * Licensed under the MIT：http://www.opensource.org/licenses/mit-license.php
 * 转载请保留原始版权信息
 * 
 * 描述：模仿select，对下拉选项添加Checkbox框。
 * new CheckboxSelect({
 * 	  input 		HTMLInputElement 必选,需要绑定的input
 * 	  hiddeninput   HTMLInputElement 可选,需要接收所勾选项id的input，为通过AJAX获取键值对准备 v0.2实现
 * 	  data 			Array ['北京','上海','安徽','吉林'] 必选
 * 	  containerCls	容器className 可选,默认值checkboxselect-container
 * 	  itemCls		容器子项className 可选,默认值checkboxselect-item
 * 	  activeCls		高亮子项className 可选,默认值checkboxselect-active
 * 	  width 		宽度设置 此项将覆盖containerCls的width 可选
 *    opacity		透明度设置 此项将覆盖containerCls的opacity 可选
 *    arrayUrl		通过Url获取数组格式数据,v0.2实现
 *    jsonUrl		通过Url获取JSON格式数据,v0.2实现
 * });
 */
 
Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};
 
 /**
 *
 * CheckboxSelect构造类
 */
function CheckboxSelect(opt){
	this.win = null;   
	this.doc = null;	
	this.container = null;
	this.items = null;
	this.input = opt.input || null;
	this.hiddeninput = opt.hiddeninput || null;
	this.containerCls = opt.containerCls || 'checkboxselect-container';
	this.itemCls = opt.itemCls || 'checkboxselect-item';
	this.activeCls = opt.activeCls || 'checkboxselect-active';
	this.width = opt.width;
	this.opacity = opt.opacity;
	this.data = opt.data || [];
	this.checkboxdata = [];  //数组保存选中项的值
	this.arrayUrl = opt.arrayUrl || null;
	this.jsonUrl = opt.jsonUrl || null;
	this.active = null;
	this.visible = false;
	this.init();
}

CheckboxSelect.prototype = {
	init: function(){
		this.win = window;
		this.doc = window.document;
		//构造一个DIV元素
		this.container = this.$C('div');
		//设置div的样式
		this.attr(this.container, 'class', this.containerCls);
		//将div附在DOM文档中
		this.doc.body.appendChild(this.container);
		//设置div属性
		this.setPos();
		var _this = this, input = this.input,container = this.container;	
		this.on(input,'click',function(e){
			_this.onClick(e);
		});		
		this.onMouseover();
		this.onMousedown();
		// blur会在click前发生，元素失去焦点
		this.on(container,'blur',function(e){
			_this.hide();			
		});			
	},
	$C: function(tag){
		return this.doc.createElement(tag);
	},
	getPos: function (el){
		var pos=[0,0], a=el;
		//获取页面元素的位置
		if(el.getBoundingClientRect){
			//左、上、右、下
			var box = el.getBoundingClientRect();
			pos=[box.left,box.top];
		}else{
			//遍历根元素
			while(a && a.offsetParent){
				pos[0] += a.offsetLeft;
				pos[1] += a.offsetTop;
				a = a.offsetParent
			}			
		}
		return pos;
	},	
	setPos: function(){
		var input = this.input,
			//获得当前input元素所在位置坐标。
			pos = this.getPos(input), 
			//获得浏览器类型
			brow = this.brow, 
			//获得宽度
			width = this.width,
			//获得透明度
			opacity = this.opacity,
			//获得新增的div元素
			container = this.container;
			//直接付给他CSS样式省去了定义CSS的步骤
			container.style.cssText =
				'position:absolute;overflow:hidden;background:white;left:' 
				+ pos[0] + 'px;top:'
				//offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
				+ (pos[1]+input.offsetHeight) + 'px;width:'
				// IE6/7/8/9/Chrome/Safari input[type=text] border默认为2，Firefox为1，因此取offsetWidth-2保证与FF一致
				+ (brow.firefox ? input.clientWidth : input.offsetWidth-2) + 'px;';
		if(width){
			container.style.width = width + 'px';
		}
		if(opacity){
            if(this.brow.ie){
                container.style.filter = 'Alpha(Opacity=' + opacity * 100 + ');';
            }else{
                container.style.opacity = (opacity == 1 ? '' : '' + opacity);
            }			
		}
	},
	show: function(){
		this.container.style.visibility = 'visible';
		this.visible = true;
	},
	hide: function(){
		this.container.style.visibility = 'hidden';
		this.visible = false;	
	},
	attr: function(el, name, val){
		if(val === undefined){
			return el.getAttribute(name);
		}else{
			el.setAttribute(name,val);
			name=='class' && (el.className = val);	
		}
	},
    on: function(el, type, fn){
    	el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);
    },
    un: function(el, type, fn){
    	el.removeEventListener ? el.removeEventListener(type, fn, false) : el.detachEvent('on' + type, fn);
    },
	brow: function(ua){
		return {
			ie: /msie/.test(ua) && !/opera/.test(ua),
			opera: /opera/.test(ua),
			firefox: /firefox/.test(ua)
		};
	}(navigator.userAgent.toLowerCase()),
	createXMLHttpRequest: function(){  
		if (window.ActiveXObject) {  
			return  new ActiveXObject("Microsoft.XMLHTTP");  
		}  
		else if (window.XMLHttpRequest) {  
			return new XMLHttpRequest();  
		}  
	},	
	onClick:function(e){
		var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls,checkboxdata = this.checkboxdata ,hiddeninput = this.hiddeninput;
		this.win = window; 
		this.doc = window.document;
		this.items = [];
		if(this.data.length>0){
			this.container.innerHTML = '';
			//循环增加子项并设置样式
			for(var i=0,len=this.data.length;i<len;i++){
				var item = this.$C('div');
				this.attr(item, 'class', this.itemCls);
				var tempinput = this.$C('input');
				tempinput.type = 'checkbox';
				tempinput.value = this.data[i];
				this.on(tempinput,'click',function(e){
					var target = e.target || e.srcElement;
					if(target.checked){
						checkboxdata.push(target.value);
						input.value = checkboxdata.toString();
						if(hiddeninput)
							hiddeninput.value = checkboxdata.toString();
					}else{
						if(checkboxdata.length>0)
							checkboxdata.remove(target.value)
						input.value = checkboxdata.toString();
						if(hiddeninput)
							hiddeninput.value = checkboxdata.toString();
					}
				});
				//判断是否有初始选中
				if(checkboxdata.length>0){
					for(var t=0;t<checkboxdata.length;t++){
						if(checkboxdata[t] === this.data[i])
							tempinput.checked = true;
					}						
				}
				item.appendChild(tempinput);
				item.appendChild(this.doc.createTextNode(this.data[i]))
				this.items[i] = item;
				this.container.appendChild(item);
			}
			this.show();
		}		
	},
	onMouseover: function(){
		var _this = this, icls = this.itemCls, acls = this.activeCls;
		this.on(this.container,'mouseover',function(e){
			var target = e.target || e.srcElement;
			if(target.className == icls){
				if(_this.active){
					_this.active.className = icls;					
				}
				target.className = acls;
				_this.active = target;

			}
		});
	},
	onMousedown: function(){
		var _this = this ;
		var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls,checkboxdata = this.checkboxdata ,hiddeninput = this.hiddeninput;		
		this.on(this.container,'mousedown',function(e){
			var target = e.target || e.srcElement;
			//首先判断target是何种类型
			if(target.type === 'checkbox'){
			}else{
				if(container.childNodes.length>0){
					if(target.childNodes[0].checked){
						//如果第一个节点Checkbox是选中状态，则取消选中
						target.childNodes[0].checked = false;
						if(checkboxdata.length>0)
						checkboxdata.remove(target.childNodes[1].nodeValue)
						input.value = checkboxdata.toString();
						if(hiddeninput)
							hiddeninput.value = checkboxdata.toString();						
					}
					else{
						//如果第一个节点Checkbox是未选中状态，则选中
						target.childNodes[0].checked = true;
						checkboxdata.push(target.childNodes[1].nodeValue);
						input.value = checkboxdata.toString();	
						if(hiddeninput)
							hiddeninput.value = checkboxdata.toString();						
					}
				}			
			}
		});
	}	
}

代码下载：点击打开链接
测试中发现在FF,Chrome中会出现失去焦点时候无法触发事件的原因，原来是FF/Chrome浏览器中如果不设置tabindex值，则无法获取焦点。具体解释请看：所以需要增加如下代码：

		//设置container的tabindex值
		if(!this.brow.ie)
			this.attr(this.container, 'tabindex', 0);

3楼zhoushugeng8昨天 23:35: 不错，很有探索精神！

2楼lidaasky昨天 20:29: 也正在学这些，学习了

1楼itstudy_0629昨天 15:37: 代码里是js吗？只有js和HTML?表示看不懂了，压力很大