流程上的引导多选更新选项列表

Posted 2023-02-22

【中文标题】流程上的引导多选更新选项列表

【英文标题】：Bootstrap Multiselect update option list on flow

【发布时间】：2013-12-22 11:51:33

【问题描述】：

我使用引导程序multi-select，我想使用 ajax 更新流选项

在初始化时填充我的多选

<select name="model" class="multiselect" multiple="multiple">
                <? foreach ($sel_models as $mod)  ?>
                    <option value="<?= $mod ?>" <?= ($mod == $params['model']) ? 'selected' : '' ?>><?= $mod ?></option>
                <?  ?>    
</select>  

然后在事件中我想用以下 ajax 更新我的选项列表

我尝试使用重建方法，但创建后不会触发下拉菜单

 $.ajax(
        type: 'post',
        url: "helper/ajax_search.php",
        data: models: decodeURIComponent(brands),
        dataType: 'json',
        success: function(data) 
            $('select.multiselect').empty();
            $('select.multiselect').append(
                    $('<option></option>')
                    .text('alle')
                    .val('alle')
                    );

            $.each(data, function(index, html) 
                $('select.multiselect').append(
                        $('<option></option>')
                        .text(html.name)
                        .val(html.name)
                        );
            );

            $('.multiselect').multiselect('rebuild')
        ,
        error: function(error) 
            console.log("Error:");
            console.log(error);
        
    );

使用 firebug 我可以看到列表已生成，但在选择时不会显示

【问题讨论】：

如果您刚刚使用 ajax 更改了选择框选项，则需要调用 $('.multiselect').multiselect('rebuild') 。它将使用选择框中的选定值再次重建。

【参考方案1】：

在我可以阅读的文档中：

.multiselect('setOptions', 选项) 用于在初始化多选后更改配置。这可能与 .multiselect('rebuild') 结合使用。

也许您无法通过最初的方式更改小部件数据。您应该以正确的方式使用setOptions 方法。

否则：按照您的方式，也许您应该考虑销毁您的小部件.multiselect('destroy') 并在之后重新创建它。

评论后更新：

在文档中：（您已链接）

通过以下方式为构建选择的选项提供数据：

var data = [
    label: "ACNP", value: "ACNP",
    label: "test", value: "test"
];
$("#multiselect").multiselect('dataprovider', data);

所以： 当您从 ajax 调用中获取数据时，您必须创建一个对象数组（这是您想要拥有的选择中的选项），其格式类似于

var data = 
[
    label: 'option1Label', value: 'option1Value',
    label: 'option2Label', value: 'option2Value',
    ...
]

当你的对象数组被创建后，你只需要调用方法

$("#multiselect").multiselect('dataprovider', data);

其中 data 是您的对象数组。

我希望我很清楚：/

【讨论】：

感谢您的反馈！我刚刚在阅读，但说实话我不知道我应该如何使用它

如果我使用 dataprovider，如何传递其他条件，如按钮宽度、最大高度等？

你知道如何在这个数组中包含部分

我使用 jquery 附加了选项，然后使用了 .multiselect('rebuild')。它奏效了

【参考方案2】：

作为 multiselect('dataprovider', data) 的替代方法，您可以完全按照您在问题中所做的方式使用 jquery append 构建列表。您需要做的唯一更改是将重建延迟到 ajax 请求完成之后。

var buildDrivers = $.getJSON('resources/orders/drivers.json', function(data)  
   $.each(data, function(i, driver) 
      $('#toolbar select[name="drivers"]').append('<option>'+driver+'</option>');
   );
);
buildDrivers.complete(function() 
    $('.multiselect').multiselect('rebuild');
);

请参阅 http://api.jquery.com/jquery.getjson/ 获取文档

【参考方案3】：

我添加了过滤后更新选项的功能，并从服务器端获取它们。该解决方案基于注入新选项、销毁选择并再次初始化它的概念。

我考虑到了：

考虑到必须保留的现有选定选项。 删除重复选项（可能是已经选择的选项与来自服务器的新选项的冲突）。 更新后保持选项托盘打开。 重新分配搜索文本框中的前一个文本并将其聚焦。

只需将 'updateOptions' 作为函数添加到 'refresh' 函数之后，以及两个辅助函数，如下所示：

updateOptions: function (options) 
        var select = this.$select;
        options += this.getSelectedOptionsString();
        var selectedIds = select.val(),
            btnGroup = select.next('.btn-group'),
            searchInput = btnGroup.find('.multiselect-search'),
            inputVal = searchInput.val();

        options = this.removeOptionsDuplications(options);
        if (!options) 
            options = '<option disabled></option>';
        

        // 1) Replacing the options with new & already selected options
        select.html(options);

        // 2) Destroyng the select
        select.multiselect('destroy');

        // 3) Reselecting the previously selected values
        if (selectedIds) 
            select.val(selectedIds);
        

        // 4) Initialize the select again after destroying it
        select.multiselect(this.options);

        btnGroup = select.next('.btn-group');
        searchInput = btnGroup.find('.multiselect-search');

        // 5) Keep the tray options open
        btnGroup.addClass('open');

        // 6) Setting the search input again & focusing it
        searchInput.val(inputVal);
        searchInput.focus();
    ,
    getSelectedOptionsString: function ()  // Helper
        var result = '',
            select = this.$select,
            options = select.find('option:selected');

        if (options && options.length) 
            $.each(options, function (index, value) 
                if (value) 
                    result += value.outerHTML;
                
            );
        

        return result;
    ,
    removeOptionsDuplications: function (options)  // Helper
        var result = '',
            ids = new Object();

        if (options && options.length) 
            options = $(options);
            $.each(options, function (index, value) 
                var option = $(value),
                    optionId = option.attr('value');

                if (optionId) 
                    if (!ids[optionId]) 
                        result += option[0].outerHTML;
                        ids[optionId] = true;
                    
                
            );
        
        return result;
    ,

演示：

状态：

“选项 1”

$('#select').multiselect('updateOptions', '<option value="2">Option 2</option>');

状态：

“选项 2”

“选项 1”

【参考方案4】：

我认为这是一种更简单的方法，可以将选项（使用 ajax 或任何其他侦听器）动态添加到现有的 Bootstrap MultiSelect。

以下是添加选项的简化示例：

function addOptionToMultiSelect(multiselectSelector, value, selected) 
    var data = [];
    $(multiselectSelector + ' option').each(function()
        var value = $(this)[0].value;
        var selected = $(this)[0].selected;
        data.push(label: value, value: value, selected: selected);
    );

    // Add the new item
    data.push(label: value, value: value, selected: selected);

    $(multiselectSelector).multiselect('dataprovider', data);

为简单起见，我假设选项中的标签和值都相同。请注意，通过从现有选项中读取 selected 属性来处理已选择的选项。您可以通过跟踪 disabled 和其他属性使其更加复杂。

示例：

addOptionToMultiSelect('#multiselect-example', 'new-option', true);