最近在做项目中需要用到带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代码:
/** * 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(); } } } }); } }