easyui combobox实现多选功能(☆)

html代码

<input id="ttt" name="ttt" class="easyui-combobox">

js代码

1、js工具方法

/**
 * 带有复选框的easyui下拉框工具方法
 * @param _id input标签的id
 * @param optionsJson json字符串，定义选项的内容，
 * 例子：
 * [
 * {id: '对应于option标签的value', text: '页面显示文本'}
 * ]
 * @param hight 下拉框高度
 */
function combobox_checkbox(_id, optionsJson, hight) {
    $('#'+_id).combobox({
        data: optionsJson,
        valueField: 'id',
        textField: 'text',
        panelHeight: hight,
        multiple: true,
        editable: false,
        formatter: function (row) { // formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
            var opts = $(this).combobox('options');
            return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
        },
        onLoadSuccess: function () { // 下拉框数据加载成功调用
            // 正常情况下是默认选中“所有”，但我想实现点击所有全选功能，这这样会冲突，暂时默认都不选
            $("#"+_id).combobox('clear'); //清空

            // var opts = $(this).combobox('options');
            // var values = $('#'+_id).combobox('getValues');
            // $.map(opts.data, function (opt) {
            //     if (opt.id === '') { // 将"所有"的复选框勾选
            //         $('#'+opt.domId + ' input[type="checkbox"]').prop("checked", true);
            //     }
            // });
        },
        onSelect: function (row) { // 选中一个选项时调用
            var opts = $(this).combobox('options');
            //当点击所有时，则勾中所有的选项
            if (row.text === "全选") {
                var data = $("#"+_id).combobox('getData');
                for (var i = 0; i < data.length; i++) {
                    $('#'+data[i].domId + ' input[type="checkbox"]').prop("checked", true);
                }
                var list = [];
                $.map(opts.data, function (opt) {
                    list.push(opt.id);
                });
                $("#"+_id).combobox('setValues', list); // combobox全选
            } else {
                //设置选中选项所对应的复选框为选中状态
                $('#'+row.domId + ' input[type="checkbox"]').prop("checked", true);
            }
        },
        onUnselect: function (row) { // 取消选中一个选项时调用
            var opts = $(this).combobox('options');
            // 当取消全选勾中时，则取消所有的勾选
            if (row.text === "全选") {
                var a = $("#"+_id).combobox('getData');
                for (var i = 0; i < a.length; i++) {
                    $('#'+a[i].domId + ' input[type="checkbox"]').prop("checked", false);
                }
                $("#"+_id).combobox('clear');//清空选中项
            } else {
                // 下面是实现全选状态下取消任何一项，则取消勾选所有

                //设置选中选项所对应的复选框为非选中状态
                $('#'+row.domId + ' input[type="checkbox"]').prop("checked", false);
                var selectedList = $("#"+_id).combobox('getValues');
                // 如果“所有”是选中状态,则将其取消选中
                if (selectedList[0] === "") {
                    // 将“所有”选项移出数组，并且将该项的复选框设为非选中
                    selectedList.splice(0, 1);
                    $('#'+opts.data[0].domId + ' input[type="checkbox"]').prop("checked", false);
                }
                $("#"+_id).combobox('clear');//清空
                $("#"+_id).combobox('setValues', selectedList); // 重新复制选中项

            }

        }
    });
}

2、js实现方法

var tttData = [
    {id: '', text: '全选'},
    {id: '1', text: '选项1'},
    {id: '2', text: '选项2'},
    {id: '3', text: '选项3'},
    {id: '4', text: '选项4'},
    {id: '5', text: '选项5'},
    {id: '6', text: '选项6'},
];
combobox_checkbox('ttt', tttData, 'auto');

3、将所选的值取出来

var tempStr="";
            var checkArry = document.getElementsByName("ttt");
           
            if(checkArry.length==1){
            	tempStr=checkArry[0].value;
            }else{
            	
            	for(var i=0;i<checkArry.length;i++){
             	   tempStr=tempStr+checkArry[i].value+",";
             	  
                }
            }