在easyui-combobox多选模式下加入选择所有选项

来源:互联网 发布:37轩辕剑四极进阶数据 编辑:程序博客网 时间:2024/06/05 00:14

  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(/^,/,"");//将第一个逗号去掉