AJAX onChange后无法初始化select2类，如何跨页面调用该组件？

核心问题分析 #

1. AJAX请求参数传递错误：原代码中POST请求的参数传递方式错误，且未正确获取下拉框选中值。
2. 动态DOM元素未重新初始化Select2：页面加载时仅初始化了一次静态存在的Select2，AJAX动态插入的新元素不会自动触发初始化。
3. DOM元素ID重复：AJAX返回的select元素与主页面的select使用了相同的TDP_Code ID，违反DOM唯一ID规则，会导致JS选择器异常。

分步解决方案 #

1. 修正AJAX请求的参数传递 #

原cek_TDP函数错误获取了DOM元素而非选中值，且POST请求的send方法应传递参数而非URL：

function cek_TDP() {
  // 获取选中值而非DOM元素
  const selectedValue = document.getElementById("TDP_Code").value;
  // 构造POST参数并编码防止乱码
  const params = `id=${encodeURIComponent(selectedValue)}`;
  postRequestTDP("result-select-tdp.php", params);
}

// 改造postRequestTDP函数，接收URL和参数
function postRequestTDP(strURL, params) {
  var xmlHttp;
  if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    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 && xmlHttp.status == 200) {
      updatePageTDP(xmlHttp.responseText);
    }
  };
  // 传递正确的POST参数
  xmlHttp.send(params);
}

2. 动态初始化Select2组件 #

在AJAX请求完成并插入DOM后，重新初始化所有未被初始化的Select2元素，避免重复初始化导致的冲突：

function updatePageTDP(str) {
  const resultContainer = document.getElementById("result-tdp");
  resultContainer.innerHTML = str;
  
  // 初始化动态添加的select2元素，跳过已初始化的实例
  $('.select2').not('.select2-hidden-accessible').select2({
    theme: 'bootstrap4'
  });
}

3. 修复DOM元素ID重复问题 #

修改result-select-tdp.php中的select元素ID，避免与主页面冲突：

<select name="result_select" class="form-control select2" id="result_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>

4. 优化主页面Select2初始化逻辑 #

封装初始化函数，方便页面加载和AJAX完成后重复调用：

// 封装Select2初始化函数
function initSelect2() {
  $('.select2').not('.select2-hidden-accessible').select2({
    theme: 'bootstrap4'
  });
}

// 页面加载完成后初始化静态元素
$(document).ready(function() {
  initSelect2();
});

完整修正后主页面代码 #

<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初始化函数
function initSelect2() {
  $('.select2').not('.select2-hidden-accessible').select2({
    theme: 'bootstrap4'
  });
}

// 页面加载时初始化静态元素
$(document).ready(function() {
  initSelect2();
});

function postRequestTDP(strURL, params) {
  var xmlHttp;
  if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    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 && xmlHttp.status == 200) {
      updatePageTDP(xmlHttp.responseText);
    }
  };
  xmlHttp.send(params);
}

function updatePageTDP(str) {
  const resultContainer = document.getElementById("result-tdp");
  resultContainer.innerHTML = str;
  // 初始化新添加的select2元素
  initSelect2();
}

function cek_TDP() {
  const selectedValue = document.getElementById("TDP_Code").value;
  const params = `id=${encodeURIComponent(selectedValue)}`;
  postRequestTDP("result-select-tdp.php", params);
}
</script>

内容的提问来源于stack exchange，提问作者M Nabil Akbar