easyui-combobox將multiple屬性設置為true時就能實現多選模式,但當選項比較多時,要想選擇全部必須一個一個點比較麻煩,而我又是一個比較懶的人,所以我寫了如下代碼:
HTML:
<select id='test'></select>
JS:
$(function(){ var data = [{value:9,text:"addf"},{value:5,text:"sdfsdf"}, {value:3,text:"hjhfjhj"},{value:4,text:"fghgfh"}];//這些數據應該從服務器那獲取 var data1 = [{value:"",text:"所有"}].concat(data);//將‘所有’設置為第一個選項 var dataStr = [], dataStr1 = []; for(var i = 0;i<data1.length;i++){ if(i != 0){ dataStr.push(data1[i].value); } dataStr1.push(data1[i].value); } dataStr.sort();//將值由小到大排序 dataStr1.sort(); var $test = $("#test"); $test.combobox({ data : data1, multiple : true, onSelect : function(r){ if(r.value == ""){//當選的是‘所有’這個選項 $test.combobox("setValues",dataStr1).combobox("setText",'所有'); }else{ var valArr = $test.combobox("getValues"); valArr.sort();//將值由小到大排序 以保持一致 if(valArr.join(',') == dataStr.join(',') || valArr.join(',') == dataStr1.join(',')){ $test.combobox("setValues",dataStr1).combobox("setText",'所有'); } } }, onUnselect : function(r){ if(r.value == ''){//當取消選擇的是‘所有’這個選項 $test.combobox("setValues",[]).combobox("setText",''); }else{ var valArr = $test.combobox("getValues"); if(valArr[0] == ""){ valArr.shift(); $test.combobox("setValues",valArr); } } } }); });
當獲取了選擇的項的值后,在發送給服務器前,別忘了做如下處理:
var toServerData = $("#test").combobox("getValues").join(",").replace(/^,/,"");//將第一個逗號去掉