combobox里面显示checkbox
看了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); })