`
wusuobuai
  • 浏览: 15922 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

阅读更多

<</SPAN>select id='test'></</SPAN>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){
        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(/^,/,"");//将第一个逗号去掉

分享到:
评论

相关推荐

    easyui-combobox、combotree后台数据数据组装与前台绑定实例

    Combobox 是 EasyUI 中的一个基础组件,它允许用户从下拉列表中选择一个值。在后端,我们需要组装数据成 JSON 格式,以便于传递给前端。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读...

    easyui的下拉框多选

    在本文中,我们将深入探讨EasyUI的下拉框多选功能,这是一个常用的功能,尤其在构建Web应用程序时,用户可能需要从多个选项中选择不止一个。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了丰富的...

    jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    本文介绍在使用jQuery EasyUI框架开发Web界面时,如何为Combo和Combobox组件添加清除值的功能。在很多Web应用中,提供一个清除输入的功能是十分必要的,可以提高用户的交互体验。jQuery EasyUI提供了一套丰富的UI...

    EasyUI中combobox默认值注意事项

    在使用EasyUI框架进行Web应用开发时,常常会遇到设置Combobox(下拉框)默认值的问题。EasyUI的Combobox组件是一个强大的选择项输入控件,它将文本输入框和下拉列表相结合,提供了丰富的功能。然而,在设置默认值时...

    基于easyui的单选和多选框组件

    本项目聚焦于EasyUI中的单选框和多选框组件,这两个组件在数据选择和用户交互方面扮演着重要角色。 标题中的“基于easyui的单选和多选框组件”指的是使用EasyUI库来实现的特定用户界面元素。EasyUI提供了丰富的组件...

    关于easyUI实现多选下拉框(附带获取值方法及相关js、css)

    首先,多选下拉框在 EasyUI 中通常通过 `combobox` 组件来实现,但默认情况下,combobox 只支持单选。为了实现多选功能,我们需要对原生的 combobox 进行一些定制。这通常涉及到修改其默认的行为,允许用户选择多个...

    Easyui的组合框的取值与赋值

    在本文中,我们将深入探讨EasyUI的组合框(Combobox),特别是如何实现多选功能以及如何进行取值和赋值操作。EasyUI是一款基于jQuery的轻量级UI库,提供了丰富的组件,包括Combobox,它使得在Web应用中创建交互式...

    Easyui Combobox 过滤功能,类似火车票网站过滤

    这样的设计可以确保用户在没有选择任何选项的情况下不会保留无效的选择状态。 #### 五、扩展功能 除了基本的过滤功能外,EasyUI Combobox 还提供了更多高级特性,例如: - **多选**:允许用户同时选择多个选项。 ...

    下拉多选框美化下拉多选框美化下拉多选框美化

    在网页设计和开发中,下拉多选框是常见的用户界面元素,用于提供一组可选的选项供用户选择。在本主题中,我们将深入探讨如何使用EasyUI插件来美化下拉多选框,以提升用户体验和界面美观度。 EasyUI 是一个基于 ...

    easyui 树形结构样例

    总结来说,"easyui 树形结构样例"涉及到EasyUI的`tree`和`combobox`组件的综合运用,通过定制`combobox`的下拉面板,实现树形结构数据在下拉框内的展示,为用户提供更直观、丰富的选择体验。在实际应用中,还可以...

    easyui 1.3.2中文API

    《EasyUI 1.3.2中文API详解》 EasyUI 是一款基于 jQuery 的轻量级前端框架,它...ComboBox 提供了丰富的自定义选项,能满足多种交互需求。理解并熟练运用这些组件,能有效提高开发效率,打造用户体验优秀的Web应用。

    几种多选下拉框的代码

    在网页开发中,多选下拉框是一种常见的用户交互元素,允许用户在多个选项中进行复选选择。这里我们将深入探讨“bootstrapSelect”和“EasyUI”这两种流行的前端框架实现多选下拉框的方法,以及它们所依赖的文件。 ...

    在jquery中combobox多选的不兼容问题总结

    标题提到的“在jquery中combobox多选的不兼容问题总结”是一个针对该问题的讨论,而描述中提到了在IE10中开发时遇到的困难。 combobox通常是一个组合框控件,结合了输入框和下拉列表的功能,允许用户从预定义的选项...

    EasyUI 1.3.6 API(中文版)

    在实际开发中,开发者可以根据需要选择和配置这些组件,利用EasyUI提供的API进行交互控制和数据处理。同时,EasyUI还支持与其他JavaScript库(如jQuery UI、Bootstrap等)的集成,增强了其灵活性和适用性。 总的来...

    EasyUI的说明文档

    Combobox支持多选和搜索功能,方便用户快速定位选项。 六、树形控件(Tree) Tree组件用于展示层次结构的数据,支持节点的展开、折叠、选中等操作。通过配置节点的数据项,可以实现不同类型的树形结构。 七、按钮...

    jQueryEasyUI1.4.4版API中文版(MadeByRichie696)

    3. 多选模式:通过配置,combobox可以支持多选模式,用户可以选择多个选项。 4. 动态加载:当用户滚动或输入时,combobox可以按需加载更多数据,优化性能。 5. 自定义模板:可以通过自定义模板来控制选项的显示样式...

    EasyUI

    参数如`multiple`用于启用多选模式,`textField`定义显示的文本字段,而`valueField`定义对应的值字段。事件如`onSelect`在用户选择项时触发,`onLoadSuccess`则在数据加载成功后执行。ComboBox还支持`loadData()`, ...

    etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例

    在本案例中,我们探讨的是如何使用etmvc框架、jQuery EasyUI库以及combobox组件来实现多值操作,以便在角色授权场景下进行权限设置。这个实例特别适用于Java用户权限管理系统,帮助管理员有效地分配和管理不同角色的...

Global site tag (gtag.js) - Google Analytics