Список параметров обновления Bootstrap Multiselect в потоке

В документе я могу прочитать:

.multiselect('setOptions', options) Используется для изменения конфигурации после инициализации множественного выбора. Это может быть полезно в сочетании с .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);

Где данные - это ваш массив объектов.

надеюсь понятно :/

В качестве альтернативы multiselect('dataprovider', data) вы можете создать список с добавлением jquery точно так же, как вы сделали в своем вопросе. Единственное изменение, которое вам нужно сделать, это отложить перестроение до тех пор, пока запрос 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/.

Мной добавлен функционал обновления опций после фильтрации и получения их со стороны сервера. Это решение опирается на концепцию введения новых опций, уничтожения выбора и его повторной инициализации.

Я принял во внимание:

1. Учитывая существующие выбранные варианты, которые необходимо оставить.
2. Удаление повторяющихся опций (может быть как конфликт из чего то уже выбранное и новое что пришло с сервера).
3. Держите панель опций открытой после обновления.
4. Переназначьте предыдущий текст в текстовом поле поиска и сфокусируйте его.

Просто добавьте «updateOptions» в качестве функции после функции «обновить» вместе с двумя вспомогательными функциями следующим образом:

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"

Я думаю, что это более простой способ добавить параметры на лету (используя 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);
}

Для простоты я предположил, что и метка, и значение в опционе одинаковы. Обратите внимание, что уже выбранные параметры позаботятся о чтении выбранного атрибута из существующих параметров. Вы можете сделать его более сложным, отслеживая отключенные и другие атрибуты.

Образец:

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