combobox实现下拉列表多选, 效果如下

在这里插入图片描述

一、先定义一个easyui-combobox

<td>
     目标人群:
</td>
<td>
     <input id="cmbAgeType" class="easyui-combobox" name="dept" />
</td>

二、在javascript中写入如下代码

  $('#cmbAgeType').combobox({
                url: 'AjaxHandler/RadioCommon.ashx?action=bindAgeType',//对应的ashx页面的数据源
                method: 'get',
                valueField: 'CID',//绑定字段ID
                textField: 'CNAME',绑定字段Name
                panelHeight: 'auto',//自适应
                multiple: true,
                formatter: function (row) {
                    var opts = $(this).combobox('options');
                    return '<input type="checkbox" class="combobox-checkbox" id="' + row[opts.valueField] + '">' + 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) {
                    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) {
                    var opts = $(this).combobox('options');
                    var el = opts.finder.getEl(this, row[opts.valueField]);
                    el.find('input.combobox-checkbox')._propAttr('checked', false);
                }
            });
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐