Populate 2nd Select2 from Selections on 1st Select2 with AJAX and OptGroup

How Do I...
#1

I have my first select2 that I pull data into from remote ajax search with multiple options allowed:

$("#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
})

with data return like this:

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

I then have a second select2 that I want to populate based on the selection(s) that are in the first select2. I initialize like this on ready: $("#NewSelect2").select2();

onchange or onselect of the first select2, I want the data to be updated in the second. I want to have optgroups to be able to group my data returned by trip for ease of viewing.

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

Now updatePackages is like this, the part for processResults or success is what I cannot figure out.

  1. The format of the JSON response
  2. How to process these results into meaningful data select2 can understand & display.
function updatePackages(){
   $("#NewSelect2").select2({
      ajax: {
        url: "/data/data_select.asp?ids=" + $("#EmailSentToGroup").val(),
        type:     "POST",
        dataType: "json'",
        processResults: function (data) {
          //THIS IS THE PART I CANNOT FIGURE OUT!!!
        }
      }        
  });
}

I have seen some of the other similar posts, but they do not add in the other complexities I am trying to do. (Populatate a second select based on selection a 1st select - #3 by galactica)

any help would be greatly appreciated as I have spent the better part of a day on this already!

Thank you.

#2

After posting this, it became clearer to me that I had part of my answer already in my first call that was working, so I updated UpdatePackages() to this:

			function updatePackages(){
				$("#SelectPackages").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
							}
						}
					}        
			  });
			}

and this is the ajax response for those that cannot find this example like I could:

[
	{
	"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"}
	]}
]

This is working correctly. And this page helped me understand how to process the results with optgroups via json format. ajax - How to add this optgroup json data to Select2? - Stack Overflow

That said, the only issue I have now is that I want to search the results already populated into SelectPackages instead of doing another ajax call each time select an item from SelectPackages. I think this is a setup issue, but I cannot figure out the difference from populating the 2nd select2 vs just selecting items after already populated. any help would again be appreciated! thanks.

#3

figured it out. Final answer below. Hope this helps someone!

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

			//https://stackoverflow.com/questions/72894350/how-to-add-this-optgroup-json-data-to-select2
			//https://stackoverflow.com/questions/29749891/populate-select2-with-ajax-data
			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
							}
						}
					}        
				});
				*/
			}