排查Select2联动触发Uncaught RangeError栈溢出问题

我帮你排查出了两个核心问题，正是它们导致了栈溢出错误：

1. Select2数据格式不匹配（主要原因） #

你的populateSchemaDropDown函数直接把字符串数组传给了Select2的data选项，但Select2要求每个选项必须是包含id和text属性的对象。当Select2尝试解析不符合要求的纯字符串数组时，内部会触发错误的处理逻辑，最终导致无限递归，栈被耗尽。

修复方法： #

修改populateSchemaDropDown函数，将字符串数组转换为Select2兼容的格式：

function populateSchemaDropDown(schemaList) {
  // 把纯字符串数组转成Select2需要的{id, text}对象数组
  const select2Data = schemaList.map(schema => ({
    id: schema,
    text: schema
  }));
  
  $('#schema').select2({
    placeholder: "--Select One--",
    allowClear: true,
    data: select2Data,
    dropdownAutoWidth: true
  });
}

2. 未定义变量的错误调用 #

在#schema的change事件处理函数中，你调用了getTable(schema)，但这里的schema变量根本没有定义，应该使用你已经获取到的selectedSchema变量。虽然这个错误本身不会直接导致栈溢出，但它会让你的Table下拉框无法正常加载数据，同时可能干扰其他逻辑。

修复方法： #

$("#schema").change(function() {
  var e = document.getElementById("schema");
  var selectedSchema = e.options[e.selectedIndex].value;
  console.log(selectedSchema);
  if (selectedSchema != "") {
    getTable(selectedSchema); // 把schema改为selectedSchema
  }
});

额外优化：完善Table下拉框逻辑 #

当前你的populateTableDropDown函数没有正确填充数据，还可以进一步完善，让它能接收Table数据并启用下拉框：

function populateTableDropDown(tableList) {
  const select2Data = tableList.map(table => ({
    id: table,
    text: table
  }));
  
  $("#table").select2({
    placeholder: "--Select One--",
    allowClear: true,
    data: select2Data,
    dropdownAutoWidth: true
  }).prop('disabled', false); // 选择Schema后启用Table下拉框
}

然后在getTable的success回调中调用这个函数：

function getTable(schema) {
  $.ajax({
    url: "heatmap.py",
    dataType: "json",
    data: {findTables: schema},
    success: function(results) {
      console.log(results);
      populateTableDropDown(results); // 填充Table下拉框
    },
    error: function() {
      console.log("table error");
    }
  });
}

这些修改应该能彻底解决栈溢出问题，同时让你的联动下拉框正常工作。

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