Список параметров Bootstrap Multiselect update в потоке

Я использую bootstrap multi-select и я хочу обновить параметры потока с помощью ajax

чтобы заполнить на init мой multiselect я делаю

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

затем на событии я хотел бы обновить свой список опций следующим ajax

Я пытался использовать метод rebuild, но не будет запускать раскрывающийся список после создания

 $.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 я вижу, что список генерируется, но на select не будет отображаться

6
ajax javascript jquery twitter-bootstrap

3 ответов

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

.multiselect ('setOptions', опции) Используется для изменения конфигурации после инициализации множественный. Это может быть полезно в сочетании с .мультиселект ("перестроить").

возможно, вы не можете изменить данные виджета своим первоначальным способом. Правильно использовать setOptions метод.

Else : с вашим способом, возможно, вы должны думать о том, чтобы уничтожить свой виджет .multiselect('destroy') и создайте его снова после.

обновление после комментария :

в doc : (вы связались )

предоставляет данные для построения параметров выбора следующим образом:

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

так : Когда вы получаете данные из своего вызова ajax, вам нужно создать массив объектов (это параметры в select, которые вы хотите иметь) с форматом, как 

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

когда Ваш массив объектов созданный, то вам просто нужно вызвать метод 

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

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

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

20

в качестве альтернативы 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/ для документации

9

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

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

  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"

0