看了http://www.cnblogs.com/yubinfeng/p/4463418.html这篇博客,我添加了部分代码,以便在最后获取combobox的value时可以拿到一个数组。

HTML代码:

<input id="com" class="easyui-combobox"/>
<input type="button" value="按钮" id="btn"/>

此处代码来自http://www.cnblogs.com/yubinfeng/p/4463418.html

$("#com").combobox({
valueField : 'id',
textField : 'name',
url:'combobox.json',
panelMaxHeight: 300,
multiple: true,
formatter: function(row){
var opts = $(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onShowPanel: function () {
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onLoadSuccess: function () {
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onSelect: function (row) {
console.log(row);
var opts = $(this).combobox('options');
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', true);
},
onUnselect: function (row) {
console.log(row);
var opts = $(this).combobox('options');
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', false);
} })

点击按钮,获取combobox的value时发现只能获取到下拉列表中的第一项value

添加以下代码即可获取所有value的数组集合。

$("#btn").click(function(){
var opts = $("#com").combobox("panel").find(".combobox-item.combobox-item-selected");
var rows = $("#com").combobox("getData"),value = [];
$.each(opts,function(i,v){
value.push(rows[$(v).index()].id);
})
console.log(value);
})

combobox里面显示checkbox的更多相关文章

  1. WinForm控件TreeView 只部分节点显示 CheckBox

    WinForm控件TreeView 只部分节点显示  CheckBox 用过asp.net的应该知道,要在treeview中实现上述功能可以使用ShowCheckBox 属性指定那些节点显示check ...

  2. TreeView 自定义显示checkbox

    本项目需要对TreeView进行定制,要求比较简单,主要要求如下: Winform中TreeView控件默认只支持所有级别的CheckBox显示或者不显示,不能控制制定Level的树节点显示 效果如下 ...

  3. Android 长按Listview显示CheckBox,实现批量删除。

    ListView实现的列表,如果是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验很不好,也给用户带来了很大的麻烦. 实现效果图 具体实现代码 select.xml 主布局文件 ...

  4. extjs中combobox默认显示第一个值

    在进入页面时往往用户希望页面能够显示默认的内容,但是页面中会存在一些选项通过用户选择之后才会加载相应的内容.在这篇文章里面介绍了如何去设置页面中默认的内容,如combobox默认显示第一个值. 页面: ...

  5. combobox无法显示选中的数据,都是undefined

    $('#firstfactor').combobox({                url: '@Url.Action("GetMultiAirFactor_Day_New", ...

  6. C# TreeView 自定义显示checkbox

    本项目需要对TreeView进行定制,要求比较简单,主要要求如下: Winform中TreeView控件默认只支持所有级别的CheckBox显示或者不显示,不能控制制定Level的树节点显示 效果如下 ...

  7. cxGrid增加一栏显示checkBox的设置方法

    鉴于本人首次设定cxGrid的CheckBox的时候费了很大劲,发现很多人都会碰到这个问题,现在总结一下,以供各位互相学习借鉴. 步骤如下(不分先后): 1. cxGrid添加完自己所需的所有字段后, ...

  8. Ajaxtoolkit Combobox位置显示不对解决

    当父级容器设置positon是absolute或relative,combobox显示的就会出现偏移,解决办法如下: 添加这个样式 .ajax__combobox_itemlist{    posit ...

  9. easyui combobox 中实现 checkbox

    $('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...

随机推荐

  1. pytho创建二维码简单版

    pytho创建二维码简单版 import qrcode aa = qrcode.make("https://github.com/phygerr/") aa.save('C:\Us ...

  2. MongoDB-6: MongoDB索引

    一.简介 在MongoDB建立索引能提高查询效率,只需要扫描索引只存储的这个集合的一小部分,并只把这小部分加载到内存中,效率大大的提高,如果没有建立索引,在查询时,MongoDB必须执行全表扫描,在数 ...

  3. MyBatis缓存机制-二级缓存

    MyBatis二级缓存是基于namespace级别的缓存. 1.MyBatis的缓存机制整体设计以及二级缓存的工作模式 如上图所示,当开一个会话时,一个SqlSession对象会使用一个Executo ...

  4. MYSQL SET ENUM字段类型

    show create table stu;//显示建表语句 create table t1(t enum('a','b','c')); insert into t1 values('a'); cre ...

  5. 在python列表中删除所有空元素

    今天在测试数据的时候偶然发现一个问题,如下: test = ['a','','b','','c','',''] for i in test: if i == '': test.remove(i) pr ...

  6. php采集

    采集思路   采集程序的思路很简单大体可以分为以下几个步骤: 1. 获取远程文件源代码(file_get_contents或用fopen).    2.分析代码得到自己想要的内容(这里用正则匹配,一般 ...

  7. Linux Shell编程第5章——文件的排序、合并和分割

    目录 sort命令 sort命令的基本用法 uniq命令 join命令 cut命令 paste命令 split命令 tr命令 tar命令 sort命令 sort命令是Linux系统一种排序工具,它将输 ...

  8. ceph存储安装配置

    1.修改yum源: 1.安装yum源:sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://dl.fedor ...

  9. 关于Python字符编码encode和decode

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 记得几天前,部门的一个小姑娘问我,怎么她Python打印出来的中文信息都乱码了?我走过去,略思一二,瞬间给她搞定,其实这是字 ...

  10. 利用同步网盘搭建个人或团队SVN服务器

    这篇文章是以前写的,现在强烈推荐两个站.1.http://git.oschina.com 2.http://www.coding.net. 推荐理由:1.可创建私有项目.2.免费稳定.3.VS2013 ...