1、解决方案背景：
项目中偶然需要用到easyui的combobox的组件，但是本组件自己没有包含全选的api事件。搜索了一些解决方案，但是不是很符合，后来发现是因为所使用的版本不一致所导致的。项目中使用的1.5的版本，而网上大部分的解决方案都是采用的自定义onSelect的方案，自己动手试过，确实不能，因为1.5版本的组件，在自定义onSelect的函数触发后，选择 了全部的值赋值给当前的组件，在赋值的同时，又会自动的触发onSelect的事件，会不断的陷入死循环中去。后来自己决定重新实现解决方案，重新定义onClick的事件，此事件是在1.5版本之后才有效使用的，下面介绍实现的具体方案。
2、实际解决方案：
自己封装AllCheckCombobox.js.源代码如下所示：
/**
*自己扩展easyui的 combobox，使其能够有全选和反选的功能。
**/
var AllCheckCombobox = (function (mod,selectId){
var select = $("#"+selectId);
/*
* combobox获取data的函数，可以替换成动态后台ajax获取，此处只是静态数据模拟。
*/
var getData = function (){
var data =[{"text":"长沙","value":"111"},{"text":"常德","value":"222"}];
data.unshift({"text":"全选/反选","value":""});
return data;
};
/*
* 扩展的核心函数之一，自己扩展combobox的onclick的函数，判断是否是全选/反选 选项，
* 若果是 则选中全部的选项，否则，清空全部的选项
*/
var onclick = function (record){
var valueField = select.combobox("options").valueField;
if(!record[valueField]){
var data = select.combobox("getData");
var values = select.combobox("getValues");
var selectVaues = [];
if((data.length - 1) != values.length){
data.reduce(function(prev, current, index, array){
selectVaues.push(current[valueField]);
},selectVaues);
}else{
selectVaues.push(record[valueField]);
}
select.combobox('setValues', selectVaues);
}
};
/*
* combobox的初始化函数，还可以自己设定一些其他的选项，可以参看easyui的官网。
*/
mod.initCombobox = function (){
$('#'+selectId).combobox({
valueField : 'value',
textField : 'text',
multiple : true,
editable : false,
panelHeight : 'auto',
panelMaxHeight : 300,
data : getData(),
onClick:onclick,
label : "城市 :",
labelPosition : "before",
labelAlign : 'right'
});
};
return mod;
})(window.AllCheckCombobox || {},'select');
具体的项目中的data 可以冲后台ajax获取，在动态获取到data数据后，自动的在最前面给增加一个"全选"的选项，扩展的onclick的事件，也是对当前的选择的值进行判断，得出的结果，来进行对当前的下拉框赋值操作。
3、测试代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<div id="panel" style="98%;padding:10px 10px;">
<input id="select" style="20%;" value=""/>
</div>
</body>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="AllCheckCombobox.js"></script>
<script type="text/javascript">
$(function(){
AllCheckCombobox.initCombobox();
});
</script>
</html>
4、测试效果：
选择全选的选项，就会自动的选择下面的所有的值，获取当前选中的值，可以使用easyui的combobox的getValues获取。