使用 AJAX 进行更改后无法启动 select2 类

问：

使用 AJAX 进行更改后无法启动 select2 类 这是主页，选择任何选项后我无法调用select2类，我什至不知道这叫AJAX是什么，或者只是纯javascript的常规POST

<select name="TDP_Code" class="form-control select2" id="TDP_Code" onchange="cek_TDP();">
   <option value="select" selected>(Select TDP Grp No)</option>
   <option value="1">Content 1</option>
   <option value="2">Content 2</option>
</select>

<div id="result-tdp">
    <div class="row mb-3 ml-4">
         <div class="col-md-2">
             <span>Talent</span>
          </div>
             <span>:</span>
       <div class="col-md-9 ml-5">
         <select class="form-control select3" style="width: 100%;" id="talent">
             <option value="0">(Select Talent)</option>
         </select>
        </div>
    </div>
</div>

<script>
$('.select2').select2({
    theme: 'bootstrap4'
});
function postRequestTDP(strURL) {
      var xmlHttp;
      if (window.XMLHttpRequest) {
        var xmlHttp = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlHttp.open("POST", strURL, true);
      xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
          updatePageTDP(xmlHttp.responseText);
        }
      };
      xmlHttp.send(strURL);
    }

    function updatePageTDP(str) {
      document.getElementById("result-tdp").innerHTML = str;
    }

    function cek_TDP() {
      id = document.getElementById("TDP_Code");
      var url = "result-select-tdp.php?id=" + id;
      postRequestTDP(url);
      // alert(url);
    }
</script>

结果选择-tdp.php 页面，无法在此处调用类 select2

<select name="result_select" class="form-control select2" id="TDP_Code" onchange="cek_TDP();">
   <option value="select" selected>(Select TDP Grp No)</option>
   <option value="result-1">Result 1</option>
   <option value="result-2">Result 2</option>
</select>

使用AJAX发布后如何在不同的页面中调用这两个类