select2 change value inside of modal doesn't work

<style type="text/css">
/* this will fix the size of select2 */
.select2-container {
    width: 100% !important;
}
</style>

//============================
// SOLUTION THAT MIGHT NOT WORK
//============================

//Remove tabindex="-1" on your modal
$("#mySelect2").select2();
 
//attach the dropdown to the modal 
dropdownParent: $("#myModal")
 
 // Do this before you initialize any of your modals
 $.fn.modal.Constructor.prototype.enforceFocus = function() {};



//============================
// RESET  VALUE IF YOU WANT THE SELECT TO BE DYNAMIC 
//============================

$('#mySelect2').html('').select2({data: [{id: '', text: ''}]});


//============================
// IF YOU WANT TO SET EXISTING VALUE 
//============================
            $("#mySelect2").select2("trigger", "select", {
                data: { id: "1",text:"admin" }
            });
            
//============================
// DATA SOURCE AJAX CALL  
//============================
            $('#mySelect2').select2({
                width: 'resolve',
              ajax: {
                url: 'url',
                type: "GET",
                dataType:"json",
                data: function (params) {
                  var query = {
                    search: params.term,
                    type: 'public'
                  }
                  // Query parameters will be ?search=[term]&type=public
                  return query;
                },
                processResults: function (result) {
                    return {
                        results: $.map(result.data, function (item) {
                            return {
                                text: item.product_ID,
                                id: item.product_Name
                            }
                        })
                    };
                }
              }
            });