zoukankan      html  css  js  c++  java
  • 在easyuicombobox多选模式下加入选择所有选项

      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(/^,/,"");//将第一个逗号去掉
  • 相关阅读:
    Velocity的使用小记
    fastJson的SerializeFilter使用
    快捷的时间转化
    How to execute a Stored Procedure with Entity Framework Code First
    自定义 ASP.NET Identity Data Model with EF
    Asp.Net Core get client IP
    HTTP 请求头中的 X-Forwarded-For
    HttpRequest,WebRequest,HttpWebRequest,WebClient,HttpClient 之间的区别
    【逻辑】500桶酒,找毒酒
    Asp.Net Core 输出 Word
  • 原文地址:https://www.cnblogs.com/weeksun23/p/2743399.html
Copyright © 2011-2022 走看看