无法动态添加多个 select2 选项

Question

在我的 Web 应用程序中，我使用 select2 多个 select 框。我还使用 select2 的自动完成功能。当 api 检索数据时，我想将数据附加到多个 select2 作为选项。但是我遇到了一些奇怪的问题。它没有正确附加选项。这是我的代码。

是js代码

<script>
    $(document).ready(function () {
        $('.select2').select2({
            dataType: 'json',
            delay: 250,
            ajax: {
                url: '/Message/GetSelect2Options',
                dataType: 'json',
                processResults: function (data) {
                    newOption = new Option(data.results[0].groupName, data.results[0].messageGroupId);
                    $('.select2').append(newOption).trigger('change');
                    return {
                        results: data.results
                    };
                }
            }
        });
    });
</script>

Answer 1

您可以尝试使用 .each() 方法遍历每个 .select2 class，然后将选项分别附加到每个 .select2 元素，例如：

$(document).ready(function() {
   $('.select2').each(function() {
      $(this).select2({
         dataType: 'json',
         delay: 250,
         ajax: {
            url: '/Message/GetSelect2Options',
            dataType: 'json',
            processResults: function(data) {
               return {
                  results: $.map(data.results, function(obj, index) {
                     return { id: obj.messageGroupId, text: obj.groupName };
                  })
               };
            }
         }
      });
   })
});

Working Fiddle

无法动态添加多个 select2 选项

Cannot add multiple select2 option dynamically

javascript

jquery

multiple-select

jquery-select2