带chekcbox功能的下拉框

来源：互联网发布：eclipse mac 稳定版本编辑：程序博客网时间：2024/05/21 10:23

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




	
					
					   带chekcbox功能的下拉框
	  	   带搜索功能的下拉框select
	  	   带搜索功能的下拉框
	  	   复选框ChekcBox
	  	   创建一个带分组功能的下拉列表框控件
	  	   js实现带搜索功能的下拉框
	  	   magicsuggest 多选以及带搜索功能的下拉框
	  	   带搜索功能的下拉选择框select2
	  	   easyui 带复选功能的下拉菜单
	  	   下拉框内容太多，一个带搜索功能的下拉输入框实现
	  	   yii2下拉框带搜索功能
	  	   带提示的下拉框
	  	   带搜索的下拉框
	  	   可输入的下拉列表(带搜索功能)
	  	   带记忆功能的地址栏（下拉菜单）
	  	   EXT.NET ComboBox下拉框带删除功能
	  	   EXT.NET ComboBox下拉框带删除按钮功能
	  	   使用android自带的下拉刷新效果实现页面下拉刷新功能
	     		  
	  	   POJ2112解题报告【网络流-初级-isap+floyd_warshall+二分】
	  	   POJ2010 Moo University - Financial Aid
	  	   遗留问题
	  	   数据架构师: 保护 DB2 数据
	  	   POJ 1214 "Accordian" Patience (UVA127)
	  	   带chekcbox功能的下拉框
	  	   OC  BOOL  随笔
	  	   Java内存模型中的三个代简介
	  	   iPhone开发技巧之私有API--- UIBarButtonItem
	  	   NHibernate/Entity Framework自定义驱动
	  	   5天学会jaxws-webservice编程第一天
	  	   深度解析Java内存的原型
	  	   sqlserver sql实用语句
	  	   5天学会jaxws-webservice编程第二天