easyui实现下拉框多选

在 easyui 中实现下拉框多选，需要使用 easyui-combobox 组件，并设置其 multiple 属性为 true。例如：

<input class="easyui-combobox" name="cc" data-options=" 
    valueField: 'id', 
    textField: 'text', 
    url: 'get_data.php', 
    multiple: true 
">

其中，multiple 为 true 表示开启多选功能。在后端 PHP 文件中，需要返回一个 JSON 格式的数据，例如：

[ 
    { "id":1, "text":"Option 1" }, 
    { "id":2, "text":"Option 2" }, 
    { "id":3, "text":"Option 3" } 
]

这样就可以实现 easyui 下拉框多选的功能了。

相关问题

easyui combobox下拉框实现多选

easyui combobox下拉框默认是单选的，如果要实现多选，需要做以下修改：

1. 在combobox的options中添加multiple:true，表示启用多选模式。

2. 在combobox的options中添加onSelect和onUnselect两个事件，用于在选择和取消选择时更新选中的值。

3. 在combobox的panel中添加checkbox或者复选框，用于选择多个选项。

以下是实现多选的示例代码：

HTML代码：

<input id="cc" class="easyui-combobox" style="width:200px;">

JavaScript代码：

$('#cc').combobox({
    url: 'get_data.php',
    valueField: 'id',
    textField: 'text',
    multiple: true,
    panelHeight: 'auto',
    onSelect: function(record){
        var value = $(this).combobox('getValues');
        value.push(record.id);
        $(this).combobox('setValues', value);
    },
    onUnselect: function(record){
        var value = $(this).combobox('getValues');
        var index = value.indexOf(record.id);
        if (index >= 0){
            value.splice(index, 1);
        }
        $(this).combobox('setValues', value);
    },
    onLoadSuccess: function(){
        var data = $(this).combobox('getData');
        var value = $(this).combobox('getValues');
        var panel = $(this).combobox('panel');
        panel.find('.combo-panel-checkbox').remove();
        $.each(data, function(index, item){
            var checkbox = $('<input type="checkbox" class="combo-panel-checkbox">').val(item.id);
            if (value.indexOf(item.id) >= 0){
                checkbox.prop('checked', true);
            }
            checkbox.insertBefore(panel.find('.combo-panel-list'));
        });
    },
    onShowPanel: function(){
        var data = $(this).combobox('getData');
        var value = $(this).combobox('getValues');
        var panel = $(this).combobox('panel');
        panel.find('.combo-panel-checkbox').prop('checked', false);
        $.each(data, function(index, item){
            if (value.indexOf(item.id) >= 0){
                panel.find('.combo-panel-checkbox[value="'+item.id+'"]').prop('checked', true);
            }
        });
    }
});

注：示例代码中的get_data.php是一个返回JSON格式数据的接口，可以根据实际情况修改。

Easyui怎么下拉框多选

您可以使用Easyui的combobox组件来实现下拉框多选。在combobox的options属性中设置multiple为true即可开启多选模式。例如：

$('#myCombobox').combobox({
multiple: true,
// 其他配置项
});

然后在数据源中设置每个选项的value和text属性，如：

var data = [{
value: '1',
text: '选项1'
}, {
value: '2',
text: '选项2'
}, {
value: '3',
text: '选项3'
}];

最后将数据源设置给combobox的data属性即可：

$('#myCombobox').combobox('loadData', data);