看了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. JS给TR隔行换色,鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  2. Vue(5)- axios、vuex

    一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loade ...

  3. Selenium 安装与卸载

    安装: 在cmd中键入pip install selenium==3.6.0(等号后面的为版本号),并点击回车,当出现Successfully installed selenium-3.6.0即表示已 ...

  4. C#检测两个文件内容是否相同

    不知道为什么对Excel 2010 xlsx后缀的文件没有效果,求解! 对其他文件有效,如.txt,.csv using System; using System.Security.Cryptogra ...

  5. Unity,如何阻塞当前函数一段时间

    public class Example : MonoBehaviour { IEnumerator Example() { print(Time.time); ); print(Time.time) ...

  6. 学习地址 hadoop生态圈

    http://my.oschina.net/leejun2005/blog/140462 http://www.codelast.com/?p=3621&cpage=1#comment-361 ...

  7. java图像加密

    0 前言 为了保护服务器的图像数据,需要用一个图像加密算法来加密服务器的图像:一开始找了一种基于混沌的图像加密算法,效果还是很理想的,是把矩阵图像上的像素点进行上下左右的混乱:后来发现加密后图像会变大 ...

  8. centos7 上搭建私有云

    OwnCloud环境搭建 一. 环境搭建 1. 环境需求 服务器操作系统:Centos7.0 外网服务器操作系统:Centos7.0 Php版本号:5.4.16 Mysql版本号:5.5.52 Apa ...

  9. hadoop2.7.x运行wordcount程序卡住在INFO mapreduce.Job: Running job:job _1469603958907_0002

    一.抛出问题 Hadoop集群(全分布式)配置好后,运行wordcount程序测试,发现每次运行都会卡住在Running job处,然后程序就呈现出卡死的状态. wordcount运行命令:[hado ...

  10. 优秀 H5 案例收集 vol.3(不定期更新)

    上期浏览:Vol.1   Vol.2 爱的不同定义,五笔连成爱http://news.163.com/special/fdh5_valentines/ 世界华语悬疑文学大赛—下一位悬疑大师,就是你!h ...