你的核心问题在于Select2初始化脚本执行时，动态生成的部门下拉框还不存在——因为它是通过AJAX异步加载的，页面初始加载时#sector容器是空的，所以$(document).ready里的初始化代码找不到目标元素，自然无法生效。

下面是修改后的完整解决方案：

1. 修改updateSector()函数，在AJAX成功后初始化Select2 #

把Select2的初始化逻辑移到AJAX的success回调中，确保只有当动态下拉框被插入DOM后才执行初始化：

function updateSector(){
  <? if ($sectorID<>''){?>
  var sectorID = <?=$sectorID?>;
  <? }else{?>
  var sectorID = "";
  <?}?>
  // 优化变量声明，避免重复定义
  var indexSelect = document.getElementById("indexID");
  var indexID = indexSelect.options[indexSelect.selectedIndex].value;
  var dataString = 'indexID=' + indexID +'&sectorID=' + sectorID;
  
  // AJAX请求部分
  $.ajax({
    type: "POST",
    url: "investment_sectors.php",
    data: dataString,
    cache: false,
    success: function(html) {
      // 插入动态生成的select元素到页面
      document.getElementById("sector").innerHTML = html;
      
      // 初始化Select2并配置参数
      var select2Single = $('.js-example-basic-single').select2({
        placeholder: "Please Select",
        width: '400px',
        multiple: false,
      });
      
      // 如果有预选中的sectorID，设置值并触发change事件
      if (sectorID !== "") {
        select2Single.val(sectorID);
        select2Single.trigger("change");
      }
    }
  });
}

2. 移除页面底部的冗余初始化脚本 #

原来的$(document).ready初始化代码可以完全删除，因为现在初始化逻辑已经整合到AJAX回调中了——这部分代码在页面加载时执行，此时目标下拉框还不存在，完全起不到作用。

3. 确认investment_sectors.php的输出保持正确类名 #

你的investment_sectors.php已经给select标签加上了js-example-basic-single类，这部分不需要修改，确保它的输出如下即可：

echo "<select class=\"js-example-basic-single js-states form-control\" id=\"sectorID\" name=\"sectorID\">";
// ... 其他选项生成逻辑 ...
echo "</select>";

为什么这样修改能生效？ #

• Select2只能初始化已经存在于DOM中的元素，AJAX的success回调是在动态HTML被插入到页面后才执行的，此时目标select元素已经存在，初始化就能成功。
• 预选中值的逻辑也移到了回调里，确保只有当元素存在时才设置值，避免无效操作。

内容的提问来源于stack exchange，提问作者petworthnick