Как вручную выбрать элемент, используя AJAX, Select2 и функцию «val» - PullRequest
0 голосов
/ 24 сентября 2018

Попытка выяснить, как изменить выбранный элемент в блоке select2 после первой загрузки страницы (и после загрузки данных из вызова ajax api)

Я попытался использовать приведенное ниже,но я не могу заставить их вызывать после загрузки данных ajax?

$series2.val('2');
$series2.trigger('change');

В документации сказано, что это невозможно сделать с помощью функции val (см. здесь https://select2.org/programmatic-control/add-select-clear-items), и я не хочусделать это с помощью пользовательского вызова API, который предоставляет «выбранное» значение - поскольку это не работает с шаблонами.

Это НЕ дубликат Select2 автоматического изменения события триггера

    var $make2 = $(".make2");
    var $series2 = $(".series2");
    $make2.select2().on('change', function() {
        $series2.empty();
        if ($make2.val() !== null) {
            $.ajax({
                url: "{{ url('/') }}" + "/api/series/" + $make2.val(),
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function(data) {
                    $series2.select2({
                        data: data,
                        templateSelection: function(result) {
                            return result['text'];
                        },
                        templateResult: function(result) {
                            if (!result['id']) {
                                return result['text'];
                            };
                            var final =
                                '<div>' +
                                    '<strong>' + result['text'] + '</strong>' +
                                    '<ul class="list-unstyled">' +
                                        '<li><em>' + result['make'] + '</em></li>' +
                                        '<li><em>' + result['category'] + '</em></li>' +
                                    '</ul>' +
                                '</div>';
                            return final;
                        },
                        escapeMarkup: function(result) {
                            return result;
                        },
                    });
                }
            });
        }
    }).trigger('change');
});
...