参考：

1.escusotm.css:

/* 表单下拉多选控件样式 Begin */
.esSelect{
            position: relative;
        }
        .esSelect .inputWrap{
            width:100%;
            min-height: 40px;
            border: 1px solid #ccc;
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }
        .esSelect ul{
            padding:0 5px ;
            margin: 0;
            padding-right: 35px;
        }
        .esSelect ul,li{
            list-style: none;
        }
        .esSelect li{
            display: inline-block;
            background: #eaeaea;
            padding: 5px;
            margin: 5px 5px 5px 0;
            border-radius: 5px;
        }
        .esSelect .fa-times{
            cursor: pointer;
        }
        .esSelect .fa-times:hover{
            color: #237eff;
        }
        .esSelect .esSelect-option{
            width: 100%;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: scroll;
            position: absolute;
            height: 0;
            opacity: 0;
        }
        .esSelect .esSelect-option div{
            padding: 10px;
        }
        .esSelect .inputWrap>i{
            position: absolute;
            padding: 13px;
            right: 0;
            top: 0;
        }
        .esSelect-option div{
            cursor: pointer;
            /*border-bottom: 1px solid #e7e7e7;*/
            margin: 5px;
        }
        .esSelect-option div i{
            float: right;
            color: #ffffff;
        }
        .esSelect-option div.selected{
            background: #237eff;
            color: #ffffff;
            border-radius: 5px;
        }
        .esSelect-option div:hover{
            /*background: #9ec6ff;*/
            color: #9ec6ff;
            /*border-bottom: 1px solid #9ec6ff;*/
        }
/* 表单下拉多选控件样式 End */ 

2.escusotm.js:

//自定义infopath下拉列表框多选扩展控件参数说明：
//this：指向一个div的控件容器，扩展的控件，添加到这里面即可
//dataStoreCtrl：值存储控件
//extendConfig：表单里配置的扩展配置，id字符串,width宽度
function esSelectExCtrlCreate(dataStoreCtrl, extendConfig) {
    //是否禁用(一般是infopath条件样式或者infopath设定)
    var isDisabled = 'true' == $(this).attr('disabled') || 'disabled' == $(this).attr('disabled');

    // 是否只读
    var isPrint = '1' === $(this).attr('esprint');

    // 当前的值，也就是表单里存储的值
    var curVal = isPrint ? $(this).attr('esdataval') : dataStoreCtrl.val();
    
    var cfg = $.parseJSON(extendConfig);
    if(!cfg.width || cfg.width==null){
        width=250;
    }

    if (isPrint) {
        if(curVal!=''){
            that=this;
            $.ajax({
                url:'/es/ui/grid/show.do?gridId=d0fbf0cb813d4d60bc25ce77b4b7ccdf&viewId=5d6f5f964ba247f2b7560705d26151d4&action=data', 
                data:{
                    "ids":curVal//JSON.stringify(datas) 转带逗号的字符串
                    },
                type: 'post',
                dataType: 'json',
                success:function(data) {
                    console.info(data)
                    if(data.code=200) {
                        debugger
                        console.log(data.rows);
                        var datas="";
                        $.each(data.rows,function (i, ctrl) {
                            if(datas==""){
                                datas=ctrl.NAME;
                            }
                            else{
                                datas=datas+","+ctrl.NAME;
                            }
                        });
                        
                        var div = $('<div><span>'+datas+'</span></div>');
                        that.append(div);
                    } 
                    else {
                    //alert(data.msg);
                    }
                }
            });
        }
    }
    else{
         var divesselect=$('<div id="esSelect'+cfg.id+'" class="esSelect" style="width: '+cfg.width+'px;float: left"></div>');
         
         this.append(divesselect);
         
          debugger
         $.ajax({
                url:'/es/ui/grid/show.do?gridId=d0fbf0cb813d4d60bc25ce77b4b7ccdf&viewId=5d6f5f964ba247f2b7560705d26151d4&action=data', 
                //data:{
                //    "ids":curVal//JSON.stringify(datas) 转带逗号的字符串
                //    },
                type: 'post',
                dataType: 'json',
                success:function(data) {
                    console.info(data)
                    if(data.code=200) {
                        debugger
                        console.log(data.rows);
                        
                        var esdatas=new Array();
                        var esdata=new Object();
                        $.each(data.rows,function (i, ctrl) {
                            esdata=new Object();
                            esdata.NAME=ctrl.NAME;
                            esdata.VALUE=ctrl.ID;
                            
                            esdatas[i]=esdata;
                        });
                        
                         var esSelect=$('#esSelect'+cfg.id).esSelect({
                            mult: true,
                            option:esdatas
                            //[
                            //    { label: "选项1", value: 0 },
                            //    { label: "选项2", value: 1 },
                            //    { label: "选项3", value: 2 },
                            //    { label: "选项4", value: 3 },
                            //    { label: "选项5", value: 4 },
                            //    { label: "选项6", value: 5 }
                            //],
                            //onChange: function (res) {
                            //    
                            //}
                        });
                        
                        if(curVal!=''){
                            var arr=curVal.split(',')
                            debugger
                            //$('#esSelect'+cfg.id).setResult(["1", "2"]);
                            esSelect.setResult(arr);
                        }
            } 
            else {
                    //alert(data.msg);
            }
        }
        });
        
        
    }
}

3.表单引用：

/web/scripts/esSelect/esselect.js

代码：

/**
 * Created by sj on 2018/4/26.
 */
(function ($) {
    //初始化参数
    var mySelect = function (ele, options) {
        this.ele = ele;
        this.defaults = {
            mult: false
        };
        this.options = $.extend({}, this.defaults, options);
        this.result = [];
    };
    mySelect.prototype = {
        init: function () {//初始化函数
            this.pubFunction();
            this.initOption();
            this.closeSelectEvent();
            this.addEvent();
        },
        closeSelectEvent: function () {
            debugger
            var that = this;
            this.ele.find(".inputWrap").on("click", function (event) {
                debugger
                event.stopPropagation();
                if (that.ele.find(".inputWrap>i").hasClass("fa-angle-down")) {
                    that.ele.find(".inputWrap>i").removeClass("fa-angle-down").addClass("fa-angle-up");
                    that.ele.find(".mySelect-option").animate({ height: "400px", opacity: "1" }, "fast", "swing")
                } else {
                    that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
                    that.ele.find(".mySelect-option").animate({ height: "0", opacity: "0" }, "fast", "swing")
                }
            });
            $("html").on("click", function () {
                debugger
                that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
                that.ele.find(".mySelect-option").animate({ height: "0", opacity: "0" }, "fast", "swing")
            })
        },
        pubFunction: function () {
            debugger
            Array.prototype.contains = function (obj) {
                var i = this.length;
                while (i--) {
                    if (this[i] === obj) {
                        return i;  // 返回的这个 i 就是元素的索引下标，
                    }
                }
                return false;
            }
        },
        initOption: function () {
            debugger
            //初始化输入框和option
            this.ele.append('<div class="inputWrap"><ul></ul><i class="fa fa-angle-down"></i></div>');
            this.ele.append('<div class="mySelect-option"></div>');
            for (var i = 0; i < this.options.option.length; i++) {
                this.ele.find(".mySelect-option").append('<div data-value="' + this.options.option[i].value + '"><span>' + this.options.option[i].label + '</span><i class="fa fa-check"></i></div>')
            }
        },
        addEvent: function () {
            debugger
            var that = this;
            this.ele.find(".mySelect-option").find("div").on("click", function (event) {
                event.stopPropagation();
                if (that.options.mult) {
                    if ($(this).hasClass("selected")) {
                        $(this).removeClass("selected");
                        that.result.splice(that.result.contains($(this).attr("data-value")), 1)
                    } else {
                        $(this).addClass("selected");
                        that.result.push($(this).attr("data-value"))
                    }
                    that.refreshInput();
                } else {
                    if ($(this).hasClass("selected")) {
                        $(this).removeClass("selected");
                        that.result = '';
                    } else {
                        that.ele.find(".mySelect-option").find("div").removeClass("selected");
                        $(this).addClass("selected");
                        that.result = $(this).attr("data-value");
                        that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
                        that.ele.find(".mySelect-option").animate({ height: "0", opacity: "0" }, "fast", "swing")
                    }
                    that.refreshInput($(this).find("span").text());
                }
                that.options.onChange(that.result)
            });
        },
        inputResultRemoveEvent: function () {
            debugger
            var that = this;
            this.ele.find(".inputWrap ul li i").on("click", function (event) {
                event.stopPropagation();
                that.result.splice(that.result.contains($(this).attr("data-value")), 1);
                that.refreshInput();
                that.removeOptionStyle($(this).attr("data-value"));
                that.options.onChange(that.result);
            })
        },
        removeOptionStyle: function (val) {
            debugger
            this.ele.find(".mySelect-option").find("div").each(function () {
                if ($(this).attr("data-value") == val) {
                    $(this).removeClass("selected")
                }
            })
        },
        refreshInput: function (label) {
            debugger
            this.ele.find(".inputWrap ul").empty();
            if (this.options.mult) {
                for (var i = 0; i < this.options.option.length; i++) {
                    for (var j = 0; j < this.result.length; j++) {
                        if (this.result[j] == this.options.option[i].value) {
                            this.ele.find(".inputWrap ul").append('<li><span>' + this.options.option[i].label + '</span>&nbsp;&nbsp;<i data-value="' + this.options.option[i].value + '" class="fa fa-close"></i></li>')
                        }
                    }
                }
            } else {
                if (this.result == '') {
                    this.ele.find(".inputWrap ul").empty()
                } else {
                    this.ele.find(".inputWrap ul").append('<li><span>' + label + '</span>&nbsp;&nbsp;</li>')
                }

            }
            this.inputResultRemoveEvent();
        },
        setResult: function (res) {
            debugger
            this.result = res;
            if (this.options.mult) {
                if (res instanceof Array) {
                    this.refreshInput();
                    this.ele.find(".mySelect-option").find("div").each(function () {
                        for (var i = 0; i < res.length; i++) {
                            if ($(this).attr("data-value") == res[i]) {
                                $(this).addClass("selected")
                            }
                        }

                    })
                } else {
                    alert("参数必须是数组")
                }

            } else {
                for (var i = 0; i < this.options.option.length; i++) {
                    if (this.options.option[i].value == res) {
                        this.refreshInput(this.options.option[i].label)
                    }
                }
                this.ele.find(".mySelect-option").find("div").each(function () {
                    if ($(this).attr("data-value") == res) {
                        $(this).addClass("selected")
                    }
                })
            }

        },
        getResult: function () {
            return this.result;
        }
    };
    $.fn.mySelect = function (options) {
        var select = new mySelect(this, options);
        select.init();
        return select;
    };
})(jQuery);

4.控件：

esSelectExCtrlCreate

{"id":"eseses","width":450}

新增：

编辑：

查看：