在easyui-combobox多選模式下加入選擇所有選項


  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(/^,/,"");//將第一個逗號去掉


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM