Question

大家早上好。我对引导多重选择有疑问，研究后无法显示选定的值。

。

然后我选择一些选项并进行搜索。

因此“ Arruolati”之类的信息确实发生了变化，但未显示multiselect的选定值。

这是最初填充多选内容的代码

<div class="form-group col-xs-12 col-md-12 col-lg-3">
    <div class="col-xs-12 col-md-12 col-lg-12">
        <select name="protocollo[]" id="protocollo" class="multiselect" multiple="multiple">
            <?php foreach($this->protocolli_grouped_no_array as $p): ?>
                <?php if($p->id_equipe == $this->id_equipe): ?>
                    <option <?php if(is_null($this->list_protocollo) || in_array($p->nome_categoria, $this->list_protocollo)): ?> selected <?php endif; ?> value="<?= $p->nome_categoria; ?>"><?= $this->translate($p->nome_categoria); ?></option>
                <?php endif; ?>
            <?php endforeach; ?>
        </select>
    </div>
</div>

此js代码初始化多选

$('#protocollo').multiselect({
    enableFiltering: true,
    buttonWidth: '100%',
    enableHTML: true,
    maxHeight: 295,
    includeSelectAllOption: false, //modificato button select all
    buttonClass: 'btn btn-white',

    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> &nbsp;<b class="fa fa-caret-down"></b></button>',
        ul: '<ul class="multiselect-container dropdown-menu"></ul>',
        filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
        filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
        li: '<li><a tabindex="0"><label></label></a></li>',
        divider: '<li class="multiselect-item divider"></li>',
        liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>',
    },

    buttonText: function(options, select) {
        if (options.length === 0) {
            return "Seleziona un protocollo" + ' <b class="fa fa-caret-down"></b>';//ACE
        }
        else if (options.length === $('option', $(select)).length) {
            groupForLabel1 = i18n.translate("All protocols").fetch();
            return i18n.translate("All protocols").fetch() + ' <b class="fa fa-caret-down"></b>';//ACE
        }
        else if (options.length > this.numberDisplayed) {
            groupForLabel1 = options.length + ' ' + this.nSelectedText;
            return options.length + ' ' + this.nSelectedText + ' <b class="fa fa-caret-down"></b>';//ACE
        }
        else {
            var selected = '';
            options.each(function() {
                var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).html();
                if (label.length>9){
                    label = label.substring(0,8) + '.';
                }

                selected += label + ' , ';
            });

            groupForLabel1 = selected.substr(0, selected.length - 2);
            return selected.substr(0, selected.length - 2) + ' <b class="fa fa-caret-down"></b>';//ACE
        }
    },

    /*buttonText: function(option, select) {
        return i18n.translate('Protocol').fetch() + ' <b class="fa fa-caret-down"></b>';
    }*/
});

并且此js代码用于在更改Equipe值时重新加载协议过滤器

 $("#id_equipe")
    .change(function(e){
        var selected = this.value;
        $protocollo = $('#protocollo');
        $protocollo[0].options.length = 0;
        var elements = [];
        $.each(jsonProtocolliGrouped, function(key,value) {
            if ((selected === '' && !JSON.stringify(elements).includes(JSON.stringify({label:value['nome_categoria'], value:value['nome_categoria']}))) || selected === value['id_equipe']) {
                elements.push({label:value['nome_categoria'], value:value['nome_categoria']});
            }
        });

        $protocollo.multiselect('dataprovider', elements);
        $protocollo.multiselect('selectAll', false);
        $protocollo.multiselect('refresh');
    }).change();

我认为js函数在错误的时刻运行，并覆盖了正确的流程。有可能吗？

谢谢大家

搜索后未显示选择值

0 个答案: