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="width:98%;padding:10px 10px;">
<input id="select" style="width: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獲取。