使用 AJAX 和 OptGroup 从第一个 Select2 上的选择中填充第二个 Select2

Question

我有我的第一个 select2，我从远程 ajax 搜索中提取数据，并允许多个选项：

$("#EmailSentToGroup").select2({
    ajax: {
        url: "/trip-search",
        dataType: "json",
        delay: 250,
        data: function(params) {
            return {
                q: params.term 
            };
        },
        processResults: function(data, params) {
            var resData = [];
            data.forEach(function(value) {
                resData.push(value);
            })
            return {
                results: $.map(resData, function(item) {
                    return {
                        text: item.TripName,
                        id: item.Id
                    }
                })
            };
        }
        //,cache: true
    },
    placeholder: "Select Trip(s)...",
    minimumInputLength: 3
})

数据返回如下：

[
   {"id":"123","TripName":"Trip Name 1"},
   {"id":"456","TripName":"Trip Name 2"},
   {"id":"789","TripName":"Trip Name 3"}
]

然后我有第二个 select2，我想根据第一个 select2 中的选择来填充它。 我在准备就绪时像这样初始化：

$("#SelectPackages").select2();

第一个select2的onchange或onselect，我希望第二个更新数据。 我希望 optgroups 能够对旅行返回的数据进行分组，以便于查看。

$('#EmailSentToGroup').on('change select', function() {
    updatePackages();
});

现在updatePackages是这样的，

processResults

或

success

的部分是我无法弄清楚的。

1. JSON 响应的格式
2. 如何将这些结果处理成select2可以理解并显示的有意义的数据。

function updatePackages(){
   $("#SelectPackages").select2({
      ajax: {
        url: "/data/trip-packages-lists?ids=" + $("#EmailSentToGroup").val(),
        type:     "POST",
        dataType: "json'",
        processResults: function (data) {
          //THIS IS THE PART I CANNOT FIGURE OUT!!!
        }
      }        
  });
}

我看过其他一些类似的帖子，但它们并没有增加我想做的其他复杂性。 （https://forums.select2.org/t/populatate-a-second-select-based-on-selection-a-1st-select/472/3）

任何帮助将不胜感激，因为我已经花了一天的大部分时间在这上面！

谢谢你。

Answer 1

发布此内容后，我更清楚地意识到我在第一次通话中已经得到了部分答案，因此我将 UpdatePackages() 更新为：

    $("#EmailSentToGroup").on("change select", function() {
        $("#SelectPackages").val(null).html("").trigger("change");
        updatePackages();
    });

    function updatePackages(){
        $.getJSON( "/trip-packages-lists?type=packages&ids=" + $("#EmailSentToGroup").val(), function(respond) {
            $("#SelectPackages").select2({
                multiple: true,
                data: respond
            });
            });
        
        /*
        $("#SelectPackagesXX").select2({ //Do not use this since it will call Ajax each time you type in newly popualted select2
            ajax: {
                url: "/trip-packages-lists?type=packages&ids=" + $("#EmailSentToGroup").val(),
                type: "POST",
                dataType: "json",
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    }
                }
            }        
        });
        */
    }

对于那些像我一样找不到这个示例的人来说，这是 ajax 响应：

[
    {
    "text": "Trip Name 1",
    "children": [
        {"id": "2278","text": "A) Package 1"},
        {"id": "2279","text": "B) Package 2"}
    },
    {
    "text": "Trip Name 2",
    "children": [
        {"id": "4159","text": "Trip Package 1"},
        {"id": "4160","text": "Trip Package 2"},
        {"id": "4158","text": "Trip Package 3"}
    ]}
]

这个页面帮助我了解如何通过 json 格式使用 optgroups 处理结果。

如何将此optgroup json数据添加到Select2？

和

使用 AJAX 数据填充 Select2