最近做的需求裡面有類似於下拉框多選的需求，因為本身應用的是layui的元件庫，所以變去借鑑了一下寫法，應用到自己的專案之後的效果那是剛剛的。超級好用，下面先貼上程式碼：

/**

 @Name：layui.form 表單元件
     @Author：賢心
 @License：MIT

 */

layui.define('layer', function(exports){
    "use strict";

    var $ = layui.$
        ,layer = layui.layer
        ,hint = layui.hint()
        ,device = layui.device()

        ,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this'
        ,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'

        ,Form = function(){
        this.config = {
            verify: {
                required: [
                    /[\S]+/
                    ,'必填項不能為空'
                ]
                ,phone: [
                    /^1\d{10}$/
                    ,'請輸入正確的手機號'
                ]
                ,email: [
                    /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
                    ,'郵箱格式不正確'
                ]
                ,url: [
                    /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
                    ,'連結格式不正確'
                ]
                ,number: function(value){
                    if(!value || isNaN(value)) return '只能填寫數字'
                }
                ,date: [
                    /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
                    ,'日期格式不正確'
                ]
                ,identity: [
                    /(^\d{15}$)|(^\d{17}(x|X|\d)$)/
                    ,'請輸入正確的身份證號'
                ]
            }
        };
    };

    //全域性設定
    Form.prototype.set = function(options){
        var that = this;
        $.extend(true, that.config, options);
        return that;
    };

    //驗證規則設定
    Form.prototype.verify = function(settings){
        var that = this;
        $.extend(true, that.config.verify, settings);
        return that;
    };

    //表單事件監聽
    Form.prototype.on = function(events, callback){
        return layui.onevent.call(this, MOD_NAME, events, callback);
    };

    //初始賦值
    Form.prototype.val = function(filter, object){
        var that = this
            ,formElem = $(ELEM + '[lay-filter="' + filter +'"]');
        formElem.each(function(index, item){
            var itemFrom = $(this);
            layui.each(object, function(key, value){
                var itemElem = itemFrom.find('[name="'+ key +'"]')
                    ,type;

                //如果對應的表單不存在，則不執行
                if(!itemElem[0]) return;
                type = itemElem[0].type;

                //如果為複選框
                if(type === 'checkbox'){
                    itemElem[0].checked = value;
                } else if(type === 'radio') { //如果為單選框
                    itemElem.each(function(){
                        if(this.value === value ){
                            this.checked = true
                        }
                    });
                } else { //其它型別的表單
                    itemElem.val(value);
                }
            });
        });
        form.render(null, filter);
    };

    //查詢指定的元素在陣列中的位置
    Array.prototype.indexOfElem = function(val){
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    }

    //得到元素的索引
    Array.prototype.removeElem = function(val) {
        var index = this.indexOfElem(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    //placeholder是否顯示
    Form.prototype.hidePlaceholder = function(title,select){
        //判斷是否全部刪除，如果全部刪除則展示提示資訊
        if(title.find(".multiSelect a").length != 0){
            title.children("input.layui-input").attr("placeholder","");
        }else{
            title.children("input.layui-input").attr("placeholder",select.find("option:eq(0)").text());
        }
    }

    //表單控制元件渲染
    Form.prototype.render = function(type, filter){
        var that = this
            ,elemForm = $(ELEM + function(){
            return filter ? ('[lay-filter="' + filter +'"]') : '';
        }())
            ,items = {

            //下拉選擇框
            select: function(){
                var TIPS = '請選擇', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
                    ,NONE = 'layui-select-none', initValue = '', thatInput
                    ,selects = elemForm.find('select')

                    //隱藏 select
                    ,hide = function(e, clear){
                        if(!$(e.target).parent().hasClass(TITLE) || clear){
                            $('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up');
                            thatInput && initValue && thatInput.val(initValue);
                        }
                        thatInput = null;
                    }

                    //各種事件
                    ,events = function(reElem, disabled, isSearch){
                        var select = $(this)
                            ,title = reElem.find('.' + TITLE)
                            ,input = title.find('input')
                            ,multiSelect = title.find(".multiSelect")
                            ,dl = reElem.find('dl:eq(0)')
                            ,dds = dl.find('div>dd').length==0 ? dl.find('dd') : dl.find('div>dd')
                            ,index =  this.selectedIndex //當前選中的索引
                            ,nearElem //select 元件當前選中的附近元素，用於輔助快捷鍵功能
                            ,omit = typeof select.attr("lay-omit") === 'undefined' // 簡寫為 已選擇x條
                            ,isMulti = typeof select.attr('multiple') && typeof select.attr('multiple') === 'string';

                        that.hidePlaceholder(title,select);
                        if(disabled) return;

                        //展開下拉
                        var showDown = function(){
                            var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
                                ,dlHeight = dl.outerHeight();

                            index = select[0].selectedIndex; //獲取最新的 selectedIndex
                            $("body").find("."+CLASS).removeClass(CLASS+'ed'); // 收起其他下拉框
                            reElem.addClass(CLASS+'ed');
                            dds.removeClass(HIDE);
                            nearElem = null;

                            //初始選中樣式
                            if (!isMulti) {
                                dds.eq(index).addClass(THIS).siblings().removeClass(THIS);
                            }

                            //上下定位識別
                            if(top + dlHeight > $win.height() && top >= dlHeight){
                                reElem.addClass(CLASS + 'up');
                            }
                        }, hideDown = function(choose){
                            reElem.removeClass(CLASS+'ed ' + CLASS+'up');
                            input.blur();
                            nearElem = null;

                            if(choose) return;

                            notOption(input.val(), function(none){
                                if(none){
                                    initValue = dl.find('.'+THIS).html();
                                    input && input.val(initValue);
                                }
                            });
                        };

                        //點選標題區域
                        title.on('click', function(e){
                            if (isMulti) {
                                reElem.hasClass(CLASS + 'ed') ? hideDown(true): showDown();
                                dl.find(".layui-input").val("");
                                setTimeout(function () {  // 直接寫focus，會失敗。。
                                    dl.find(".layui-input").focus();
                                },500)
                            } else {
                                reElem.hasClass(CLASS+'ed') ? (
                                    hideDown()
                                ) : (
                                    hide(e, true),
                                        showDown()
                                );
                                dl.find('.'+NONE).remove();
                            }
                            e.stopPropagation();
                        });

                        //點選箭頭獲取焦點
                        title.find('.layui-edge').on('click', function(){
                            input.focus();
                        });

                        //select 中 input 鍵盤事件
                        input.on('keyup', function(e){ //鍵盤松開
                            var keyCode = e.keyCode;

                            //Tab鍵展開
                            if(keyCode === 9){
                                showDown();
                            }
                        }).on('keydown', function(e){ //鍵盤按下
                            var keyCode = e.keyCode;

                            //Tab鍵隱藏
                            if(keyCode === 9){
                                hideDown();
                            }

                            //標註 dd 的選中狀態
                            var setThisDd = function(prevNext, thisElem){
                                var nearDd, cacheNearElem;
                                e.preventDefault();

                                //得到當前佇列元素
                                thisElem = function(){
                                    if(thisElem && thisElem[0]){
                                        return thisElem;
                                    }
                                    if(nearElem && nearElem[0]){
                                        return nearElem;
                                    }
                                    return dds.eq(index);
                                }();

                                cacheNearElem = thisElem[prevNext](); //當前元素的附近元素
                                nearDd =  thisElem[prevNext]('dd'); //當前元素的 dd 元素

                                //如果附近的元素不存在，則停止執行
                                if(!cacheNearElem[0]) return;

                                //記錄附近的元素，讓其成為下一個當前元素
                                nearElem = thisElem[prevNext]();

                                //如果附近不是 dd ，或者附近的 dd 元素是禁用狀態，則進入遞迴查詢
                                if(!nearDd[0] || nearDd.hasClass(DISABLED)){
                                    return setThisDd(prevNext, nearElem);
                                }

                                //標註樣式
                                nearDd.addClass(THIS).siblings().removeClass(THIS);

                                //定位滾動條
                                var ddThis = dl.children('dd.layui-this')
                                    ,posTop = ddThis.position().top
                                    ,dlHeight = dl.height()
                                    ,ddHeight = ddThis.height();

                                //若選中元素在滾動條不可見底部
                                if(posTop > dlHeight){
                                    dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
                                }

                                //若選擇玄素在滾動條不可見頂部
                                if(posTop < 0){
                                    dl.scrollTop(posTop + dl.scrollTop());
                                }
                            };


                            if(keyCode === 38) setThisDd('prev'); //Up 鍵
                            if(keyCode === 40) setThisDd('next'); //Down 鍵

                            //Enter 鍵
                            if(keyCode === 13){
                                e.preventDefault();
                                dl.children('dd.'+THIS).trigger('click');
                            }
                        });

                        //檢測值是否不屬於 select 項
                        var notOption = function(value, callback, origin){
                            var num = 0;
                            var ignoreCase =  typeof(select.attr("lay-case"))=="undefined"; // 忽略大小寫
                            layui.each(dds, function(){
                                var othis = $(this)
                                    ,text = othis.text()
                                    ,not = ignoreCase?text.toLowerCase().indexOf(value.toLowerCase()) === -1 : text.indexOf(value) === -1;
                                if(value === '' || (origin === 'blur') ? value !== text : not) num++;
                                origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
                            });
                            var none = num === dds.length;
                            return callback(none), none;
                        };

                        //搜尋匹配
                        var search = function(e){
                            var value = this.value, keyCode = e.keyCode;

                            if(keyCode === 9 || keyCode === 13
                                || keyCode === 37 || keyCode === 38
                                || keyCode === 39 || keyCode === 40
                            ){
                                return false;
                            }

                            notOption(value, function(none){
                                if(none){
                                    dl.find('.'+NONE)[0] || dl.append('<p class="'+ NONE +'">無匹配項</p>');
                                } else {
                                    dl.find('.'+NONE).remove();
                                }
                            }, 'keyup');

                            if(value === ''){
                                dl.find('.'+NONE).remove();
                            }
                        };

                        if (isSearch) {
                            if (isMulti) {
                                input.on('keyup', search)
                            } else {
                                input.on('keyup', search).on('blur', function(e){
                                    var selectedIndex = select[0].selectedIndex;
                                    thatInput = input; //當前的 select 中的 input 元素
                                    var cur_option = $(select[0].options[selectedIndex])
                                    initValue = cur_option.attr('value') == '' ? '' : cur_option.html(); //重新獲得初始選中值
                                    setTimeout(function(){
                                        notOption(input.val(), function(none){
                                            initValue || input.val(''); //none && !initValue
                                        }, 'blur');
                                    }, 200);
                                });
                            }
                        }

                        //選擇
                        dds.on('click', function(){
                            var othis = $(this), value = othis.attr('lay-value');
                            var filter = select.attr('lay-filter'); //獲取過濾器

                            if(othis.hasClass(DISABLED)) return false;

                            if (isMulti) {

                                var valueStr = select.val() || [];
                                if(othis.find("input[type='checkbox']").is(':checked')){
                                    if (omit) {
                                        multiSelect.html(multiSelect.html() + "<a href='javascript:;'><span lay-value='"+othis.attr('lay-value')+"'>"+othis.find("span").text()+"</span><i></i></a>");
                                    } else {
                                        input.eq(0).val("已選擇"+othis.parent().find('[type=checkbox]:checked').length+"條");
                                    }
                                    valueStr.push(value);
                                }else{
                                    if (omit) {
                                        multiSelect.find("a").each(function(){
                                            if($(this).find("span").attr('lay-value') == othis.attr('lay-value')){
                                                $(this).remove();
                                                valueStr.removeElem(value);
                                            }
                                        })
                                    } else {
                                        var num =othis.parent().find('[type=checkbox]:checked').length;
                                        if (num == 0) {
                                            input.eq(0).val("");
                                        } else {
                                            input.eq(0).val("已選擇"+num+"條");
                                        }
                                        valueStr.removeElem(value);
                                    }

                                }
                                select.val(valueStr).removeClass('layui-form-danger');
                                layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
                                    elem: select[0]
                                    ,value: valueStr
                                    ,othis: reElem
                                    ,current_value: value
                                });
                                that.hidePlaceholder(title,select);
                            } else {
                                if(othis.hasClass('layui-select-tips')){
                                    input.val('');
                                } else {
                                    input.val(othis.text());
                                    othis.addClass(THIS);
                                }

                                othis.siblings().removeClass(THIS);
                                select.val(value).removeClass('layui-form-danger')
                                layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
                                    elem: select[0]
                                    ,value: value
                                    ,othis: reElem
                                });

                                hideDown(true);
                            }
                            return false;
                        });

                        reElem.find('dl>dt').on('click', function(e){
                            return false;
                        });
                        dl.on('click', function (e) {
                            if (isMulti) {
                                e.stopPropagation();
                            }
                        });

                        // 全選、取消、反選
                        dl.find('.multiOption').on('click', function (e) {
                            switch ($(this).data('value')) {
                                case 'all' :
                                    dl.find('[type=checkbox]:not(:checked)').prop('checked', true);
                                    select.children('option[value!=""]').prop('selected', true)
                                    handleMultiOption();
                                    break;
                                case 'none':
                                    dl.find('[type=checkbox]:checked').prop('checked', false);
                                    select.children('option[value!=""]').prop('selected', false);
                                    handleMultiOption();
                                    break;
                                case 'inverse':
                                    var checkedBox = dl.find('[type=checkbox]:checked');
                                    dl.find('[type=checkbox]:not(:checked)').prop('checked', true);
                                    checkedBox.prop('checked', false)

                                    var selectedOption = select.children('option[value!=""]:not(:selected)')
                                    select.children('option[value!=""]:selected').prop('selected', false)
                                    selectedOption.prop('selected', true)
                                    handleMultiOption();
                                    break;
                            }

                            e.stopPropagation(); // 阻止事件冒泡，使下拉框長顯示
                        });

                        function handleMultiOption () {

                            form.render('checkbox');
                            var valueStr = select.val() || [],
                                selectedOption = select.children('option:selected'),
                                filter = select.attr('lay-filter');
                            if (omit) {
                                var options = [];
                                for (var i = 0; i < selectedOption.length; i++) {
                                    options.push("<a href='javascript:;'><span lay-value='"+(selectedOption[i].value||selectedOption[i].text)+"'>"+selectedOption[i].text+"</span><i></i></a>");
                                }
                                multiSelect.html(options.join(''));
                            } else {
                                input.eq(0).val(selectedOption.length==0?"":"已選擇"+selectedOption.length+"條");
                            }

                            select.removeClass('layui-form-danger');
                            layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
                                elem: select[0]
                                ,value: valueStr
                                ,othis: reElem
                                ,current_value: ''
                            });
                            that.hidePlaceholder(title,select);
                        }

                        //多選刪除
                        title.delegate(".multiSelect a i","click",function(e){
                            var valueStr = select.val() || [];
                            var _this = $(this);
                            e.stopPropagation();
                            title.find("dd").each(function(){
                                if($(this).attr('lay-value') == _this.siblings("span").attr('lay-value')){
                                    $(this).find("input").removeAttr("checked");
                                    $(this).find(".layui-form-checkbox").removeClass("layui-form-checked");
                                    valueStr.removeElem($(this).attr("lay-value"));
                                    select.val(valueStr);
                                    layui.event.call(this, MOD_NAME, 'select('+ select.attr('lay-filter') +')', {
                                        elem: select[0]
                                        ,value: valueStr
                                        ,othis: reElem
                                        ,current_value: _this.siblings("span").text()
                                    });
                                }
                            });
                            $(this).parent("a").remove();
                            that.hidePlaceholder(title,select);
                        });

                        $(document).off('click', hide).on('click', hide); //點選其它元素關閉 select
                    }

                selects.each(function(index, select){
                    var othis = $(this)
                        ,hasRender = othis.next('.'+CLASS)
                        ,disabled = this.disabled
                        ,selected = $(select.options[select.selectedIndex]) //獲取當前選中項
                        ,optionsFirst = select.options[0]
                        ,isMulti = typeof othis.attr('multiple') && typeof othis.attr('multiple') === 'string'
                        ,value = isMulti?$(select).val():select.value
                        ,isTools = typeof othis.attr('lay-tools') === 'string';

                    if(typeof othis.attr('lay-ignore') === 'string') return othis.show();

                    var isSearch = typeof othis.attr('lay-search') === 'string'
                        ,placeholder = optionsFirst ? (
                        optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)
                    ) : TIPS
                        ,inputValue =  !(typeof $(select).attr("lay-omit") === 'undefined')&&value!=null&&value.length>0 ? '已選擇'+value.length+"條" : "";

                    if (isMulti) {
                        var reElem = $(['<div class="' + (isMulti ? '' : 'layui-unselect ') + CLASS + (disabled ? ' layui-select-disabled' : '') + '">'
                            , '<div class="' + TITLE + '"><input type="text" class="layui-input" value="'+inputValue+'" placeholder="' + placeholder + '"><div class="layui-input multiSelect" >' + function(){
                                var aLists = [];
                                if(typeof $(select).attr("lay-omit")==='undefined' && value != null && value != undefined && value.length != 0){
                                    for(var aList = 0;aList<value.length;aList++){
                                        if(value[aList]){
                                            var chooseText = '', chooseValue = '';
                                            $(select).find('option').each(function (i, ele) {
                                                if (typeof $(this).attr('value') == 'undefined') {
                                                    if ($(this).text() == value[aList]) {
                                                        chooseText = chooseValue = $(this).text();
                                                        return false;
                                                    }
                                                } else if ($(this).attr('value') == value[aList]) {
                                                    chooseText = $(this).text();
                                                    chooseValue = $(this).attr('value');
                                                    return false;
                                                }
                                            });
                                            aLists.push("<a href='javascript:;'><span lay-value='"+chooseValue+"'>"+chooseText+"</span><i></i></a>")
                                        }
                                    }
                                }
                                return aLists.join('');
                            }(othis.find('*')) + '<i class="layui-edge"></i></div>'
                            , '<dl class="layui-anim layui-anim-upbit' + (othis.find('optgroup')[0] ? ' layui-select-group' : '') + '" '+ ((isSearch || isTools)?'style="overflow-y: hidden;"':'') +'>' + function (options) {
                                var arr = [], height=247 ,tools = '<dd class="layui-select-tips"><div class="multiOption" data-value="all"><i class="iconfont icon-quanxuan"></i>全選</div><div class="multiOption" data-value="none"><i class="iconfont icon-qingkong"></i>清空</div><div class="multiOption" data-value="inverse"><i class="iconfont icon-fanxuan"></i>反選</div></dd>';
                                layui.each(options, function (index, item) {
                                    if (index === 0 && !item.value) {
                                        if (isSearch) {
                                            arr.push('<dd lay-value="" class="layui-select-tips" style="padding-right: 10px; margin-bottom: 5px;"><input class="layui-input" placeholder="關鍵字搜尋"></dd>');
                                            if (isTools) {
                                                arr.push(tools);
                                                height -= 37;
                                            }
                                        } else if (isTools) {
                                            arr.push(tools);
                                        } else {
                                            arr.push('<dd lay-value="" class="layui-select-tips">' + (item.innerHTML || TIPS) + '</dd>');
                                        }
                                    } else {
                                        if (index ===1 && (isSearch || isTools)) {
                                            arr.push('<div  style="max-height: '+height+'px; overflow-y: auto" >')
                                        }
                                        if(value != null && value != undefined && value.length != 0) {
                                            for (var checkedVal = 0; checkedVal < value.length; checkedVal++) {
                                                if (value[checkedVal] == item.value) {
                                                    arr.push('<dd lay-value="' + item.value + '">' + '<input type="checkbox" ' + (item.disabled ? "disabled" : "") + ' checked lay-filter="searchChecked" title="' + item.innerHTML + '" lay-skin="primary"></dd>');
                                                    return false;
                                                }
                                            }
                                        }
                                        arr.push('<dd lay-value="' + item.value + '">' + '<input type="checkbox" ' + (item.disabled ? "disabled" : "") + ' lay-filter="searchChecked" title="' + item.innerHTML + '" lay-skin="primary"></dd>');
                                    }
                                });
                                arr.length === 0 && arr.push('<dd lay-value="" class="' + DISABLED + '">沒有選項</dd>');
                                if (isSearch || isTools) {
                                    arr.join("</div>");
                                }
                                return arr.join('');
                            }(othis.find('*')) + '</dl>'
                            , '</div>'].join(''));

                        hasRender[0] && hasRender.remove(); //如果已經渲染，則Rerender
                        othis.after(reElem);
                        events.call(this, reElem, disabled, isMulti);
                    } else {
                        //替代元素
                        var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
                            ,(disabled ? ' layui-select-disabled' : '') +'">'
                            ,'<div class="'+ TITLE +'">'
                            ,('<input type="text" placeholder="'+ placeholder +'" '
                                +('value="'+ (value ? selected.html() : '') +'"') //預設值
                                +(isSearch ? '' : ' readonly') //是否開啟搜尋
                                +' class="layui-input'
                                +(isSearch ? '' : ' layui-unselect')
                                + (disabled ? (' ' + DISABLED) : '') +'">') //禁用狀態
                            ,'<i class="layui-edge"></i></div>'
                            ,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
                            ,function(options){
                                var arr = [];
                                layui.each(options, function(index, item){
                                    if(index === 0 && !item.value){
                                        arr.push('<dd lay-value="" class="layui-select-tips">'+ (item.innerHTML || TIPS) +'</dd>');
                                    } else if(item.tagName.toLowerCase() === 'optgroup'){
                                        arr.push('<dt>'+ item.label +'</dt>');
                                    } else {
                                        arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ?  THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ item.innerHTML +'</dd>');
                                    }
                                });
                                arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">沒有選項</dd>');
                                return arr.join('');
                            }(othis.find('*')) +'</dl>'
                            ,'</div>'].join(''));

                        hasRender[0] && hasRender.remove(); //如果已經渲染，則Rerender
                        othis.after(reElem);
                        events.call(this, reElem, disabled, isSearch);
                    }

                });
            }
            //複選框/開關
            ,checkbox: function(){
                var CLASS = {
                    checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox']
                    ,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch']
                }
                    ,checks = elemForm.find('input[type=checkbox]')

                    ,events = function(reElem, RE_CLASS){
                    var check = $(this);

                    //勾選
                    reElem.on('click', function(){
                        var filter = check.attr('lay-filter') //獲取過濾器
                            ,text = (check.attr('lay-text')||'').split('|');

                        if(check[0].disabled) return;

                        check[0].checked ? (
                            check[0].checked = false
                                ,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1])
                        ) : (
                            check[0].checked = true
                                ,reElem.addClass(RE_CLASS[1]).find('em').text(text[0])
                        );

                        layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
                            elem: check[0]
                            ,value: check[0].value
                            ,othis: reElem
                        });
                    });
                }

                checks.each(function(index, check){
                    var othis = $(this), skin = othis.attr('lay-skin')
                        ,text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled;
                    if(skin === 'switch') skin = '_'+skin;
                    var RE_CLASS = CLASS[skin] || CLASS.checkbox;

                    if(typeof othis.attr('lay-ignore') === 'string') return othis.show();

                    //替代元素
                    var hasRender = othis.next('.' + RE_CLASS[0])
                        ,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
                        ,(check.checked ? (' '+ RE_CLASS[1]) : '') //選中狀態
                        ,(disabled ? ' layui-checkbox-disbaled '+ DISABLED : '') //禁用狀態
                        ,'"'
                        ,(skin ? ' lay-skin="'+ skin +'"' : '') //風格
                        ,'>'
                        ,function(){ //不同風格的內容
                            var title = check.title.replace(/\s/g, '')
                                ,type = {
                                //複選框
                                checkbox: [
                                    (title ? ('<span>'+ check.title +'</span>') : '')
                                    ,'<i class="layui-icon layui-icon-ok"></i>'
                                ].join('')

                                //開關
                                ,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>'
                            };
                            return type[skin] || type['checkbox'];
                        }()
                        ,'</div>'].join(''));

                    hasRender[0] && hasRender.remove(); //如果已經渲染，則Rerender
                    othis.after(reElem);
                    events.call(this, reElem, RE_CLASS);
                });
            }
            //單選框
            ,radio: function(){
                var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;']
                    ,radios = elemForm.find('input[type=radio]')

                    ,events = function(reElem){
                    var radio = $(this), ANIM = 'layui-anim-scaleSpring';

                    reElem.on('click', function(){
                        var name = radio[0].name, forms = radio.parents(ELEM);
                        var filter = radio.attr('lay-filter'); //獲取過濾器
                        var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); //找到相同name的兄弟

                        if(radio[0].disabled) return;

                        layui.each(sameRadio, function(){
                            var next = $(this).next('.'+CLASS);
                            this.checked = false;
                            next.removeClass(CLASS+'ed');
                            next.find('.layui-icon').removeClass(ANIM).html(ICON[1]);
                        });

                        radio[0].checked = true;
                        reElem.addClass(CLASS+'ed');
                        reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]);

                        layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
                            elem: radio[0]
                            ,value: radio[0].value
                            ,othis: reElem
                        });
                    });
                };

                radios.each(function(index, radio){
                    var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;

                    if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
                    hasRender[0] && hasRender.remove(); //如果已經渲染，則Rerender

                    //替代元素
                    var reElem = $(['<div class="layui-unselect '+ CLASS
                        ,(radio.checked ? (' '+CLASS+'ed') : '') //選中狀態
                        ,(disabled ? ' layui-radio-disbaled '+DISABLED : '') +'">' //禁用狀態
                        ,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
                        ,'<div>'+ function(){
                            var title = radio.title || '';
                            if(typeof othis.next().attr('lay-radio') === 'string'){
                                title = othis.next().html();
                                othis.next().remove();
                            }
                            return title
                        }() +'</div>'
                        ,'</div>'].join(''));

                    othis.after(reElem);
                    events.call(this, reElem);
                });
            }
        };
        type ? (
            items[type] ? items[type]() : hint.error('不支援的'+ type + '表單渲染')
        ) : layui.each(items, function(index, item){
            item();
        });
        return that;
    };

    //表單提交校驗
    var submit = function(){
        var button = $(this), verify = form.config.verify, stop = null
            ,DANGER = 'layui-form-danger', field = {} ,elem = button.parents(ELEM)

            ,verifyElem = elem.find('*[lay-verify]') //獲取需要校驗的元素
            ,formElem = button.parents('form')[0] //獲取當前所在的form元素，如果存在的話
            ,fieldElem = elem.find('input,select,textarea') //獲取所有表單域
            ,filter = button.attr('lay-filter'); //獲取過濾器


        //開始校驗
        layui.each(verifyElem, function(_, item){
            var othis = $(this)
                ,vers = othis.attr('lay-verify').split('|')
                ,verType = othis.attr('lay-verType') //提示方式
                ,value = othis.val();

            othis.removeClass(DANGER);
            layui.each(vers, function(_, thisVer){
                var isTrue //是否命中校驗
                    ,errorText = '' //錯誤提示文字
                    ,isFn = typeof verify[thisVer] === 'function';

                //匹配驗證規則
                if(verify[thisVer]){
                    var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);
                    errorText = errorText || verify[thisVer][1];

                    //如果是必填項或者非空命中校驗，則阻止提交，彈出提示
                    if(isTrue){
                        //提示層風格
                        if(verType === 'tips'){
                            layer.tips(errorText, function(){
                                if(typeof othis.attr('lay-ignore') !== 'string'){
                                    if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){
                                        return othis.next();
                                    }
                                }
                                return othis;
                            }(), {tips: 1});
                        } else if(verType === 'alert') {
                            layer.alert(errorText, {title: '提示', shadeClose: true});
                        } else {
                            layer.msg(errorText, {icon: 5, shift: 6});
                        }
                        if(!device.android && !device.ios) item.focus(); //非移動裝置自動定位焦點
                        othis.addClass(DANGER);
                        return stop = true;
                    }
                }
            });
            if(stop) return stop;
        });

        if(stop) return false;

        var nameIndex = {}; //陣列 name 索引
        layui.each(fieldElem, function(_, item){
            item.name = (item.name || '').replace(/^\s*|\s*&/, '');

            if(!item.name) return;

            //用於支援陣列 name
            if(/^.*\[\]$/.test(item.name)){
                var key = item.name.match(/^(.*)\[\]$/g)[0];
                nameIndex[key] = nameIndex[key] | 0;
                item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
            }

            if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
            if((item.type).indexOf("multiple") != -1) {
                field[item.name] = $(item).val()
            } else {
                field[item.name] = item.value;
            }
        });

        //獲取欄位
        return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
            elem: this
            ,form: formElem
            ,field: field
        });
    };

    //自動完成渲染
    var form = new Form()
        ,$dom = $(document), $win = $(window);

    form.render();

    //表單reset重置渲染
    $dom.on('reset', ELEM, function(){
        var filter = $(this).attr('lay-filter');
        setTimeout(function(){
            form.render(null, filter);
        }, 50);
    });

    //表單提交事件
    $dom.on('submit', ELEM, submit)
        .on('click', '*[lay-submit]', submit);

    exports(MOD_NAME, form);
});

這個form.js也是根據原來的進行了改變，用法是覆蓋原來的form.js 親測木有相容性和bug。達到的效果如圖：

實現了多選，關鍵字搜尋，選中的專案體現在上方的input裡面，整體的ui效果和原來的頁面也是一致的，後續要實現的功能是二級聯動，多選和關鍵字搜尋的功能的實現已經幫了大忙了。

layui還是一個可擴充套件性很強大的外掛，但是在應用是應該考慮到其渲染的效率，畢竟是將所要渲染的html元素進行重寫，並且繫結事件。這個功能還是非常好使的，希望能提供到幫助，有任何問題歡迎討論QAQ.