看了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);
})
