easyui 带复选功能的下拉菜单

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

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);
}
});

部分css样式：

.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;
}