Biegral Blog

最近由于项目需要，前端页面需要做一个带复选功能的下拉菜单，由于在项目中，需要特定的样式等，所以，给出核心代码以供日后复习：

1.效果图

2.实现的主要功能

    （1）上方提示信息

    （2）没有复选框但是有复选功能

    （3）全选和全不选的功能

    （4）选择或者取消后在上方横线上文本能体现出来

    （5）滚动条样式

3.核心代码

   因为是从项目中抽出来的，所以代码不可直接运行，主要的思路如下：

  jsp页面：

<span id="terminalTypeSpan"  style="display:none;">
	<select id="terminalType" name="terminalType"  class="easyui-combobox sep" data-options="editable:true,width:500" ></select>
	<div id="spanel">
	   <div id="sp">
		  <div class="checkitem">
                             <span class="checkbox1" id="all">✔</span>
			     <span class="checkboxValue">全部终端设备</span>
	           </div>
	   </div>
         </div>
</span>

js代码：
 <pre name="code" class="javascript">$('#terminalType').combo({
		required:false,
		editable:true,
		multiple:true
	});
	$('#spanel').appendTo($('#terminalType').combo('panel'));
	var _value="";
	var _text="终端设备";
	//提示信息
	$('#terminalType').combo('setText', _text);
	//下拉菜单操作
	$("#sp div").click(function(){
		var visibilityVal = $(this).find(".checkbox1").css("visibility");
		var tt = $(this).find(".checkboxValue").text();
		if(visibilityVal=="visible"){
			$(this).find(".checkbox1").css("visibility","hidden");
			//全部取消
			if(tt=="全部终端设备"){
				$(this).siblings().find(".checkbox1").css("visibility","hidden");
				_text = "终端设备";
			}else{
				$("#all").css("visibility","hidden");
			}
			if(_text!=tt){
				if(_text.indexOf(tt)!=0){
					 tt=","+tt;
				}else{
					 tt=tt+",";		 
				}
			}
			_text = _text.replace(tt,"");
			if(_text==""){
				_text = "终端设备";
			}
			$('#terminalType').combo('setValue', _value).combo('setText', _text);
		}else{
			$(this).find(".checkbox1").css("visibility","visible");
			//全选
			if(tt=="全部终端设备"){
				tt="";
				_text = "";
				//1.所有对号出现
				$(this).siblings().find(".checkbox1").css("visibility","visible");
				//2.重写text的值
				var texts =$(this).siblings().children(".checkboxValue");
				for(var i = 0;i<texts.length;i++){
					//最后一个元素值不需要逗号
					if(i==(texts.length-1)){
						_text+=texts[i].innerHTML;
						break;
					}
					_text+=texts[i].innerHTML+",";
				}
			}
			if(tt!=""){
				if(_text=="终端设备"){
					_text="";
					_text+=tt;
				}else{
					_text+=","+tt;
				}
			}
			
			$('#terminalType').combo('setText', _text);
		 }
		});

.super-search{
	float:right; 
	color:#46aae4;
	margin-top:10px;
    margin-right:25%; 
	cursor:pointer;
}
#btn-superSearch {
        background :url("../images/btn-superSearch.png") no-repeat 0px 5px;
        position:relative;
        top:10px;
        width:10px;
        height:10px;    
}
 .checkitem { 
    margin:5px 0px 5px 0px;
    line-height:25px;
    font-size:11px;
    color:#5e5e5e;
 } 
 .checkitem:hover {
    background:url("../images/table-body-td.png") no-repeat #3B89BE;
    color:white;
	cursor: default;
 }