基于下拉选择列表生成环境详情表格的JavaScript问题求助

你的代码主要存在几个关键问题导致无法展示环境详情：

1. mountains变量在switch的case内部声明，作用域仅限当前case块，页面加载时执行表格生成代码会找不到该变量，直接报错。
2. 选中环境后仅弹出提示，未触发表格生成逻辑。
3. 缺少表格清空逻辑，多次切换环境会导致内容重复叠加。

修改后的完整代码 #

HTML部分（无需改动）

<select id="select1" onChange="func(this)">
  <option selected="selected" value="0">--- Please select a env---</option>
  <option value="ENV1">ENV1</option>
  <option value="ENV2">ENV2</option>
  <option value="ENV3">ENV3</option>
  <option value="ENV4">ENV4</option>
  <option value="ENV5">ENV5</option>
  <option value="ENV6">ENV6</option>
</select>

<button onclick="getOption()">Check option</button>

<p> The environment selected is:
  <span class="output"></span>
</p>

<table>
  <!-- here goes our data! -->
</table>

JavaScript部分

// 统一管理所有环境的详情数据，便于维护和调用
const envDetails = {
  ENV1: [
    { name: "Linux Details", result: "env1@server" },
    { name: "Owner DB", result: "env1@db1" }
  ],
  ENV2: [
    { name: "Linux Details", result: "env2@server" },
    { name: "Owner DB", result: "env2@db2" }
  ],
  ENV3: [
    { name: "Linux Details", result: "env3@server" },
    { name: "Owner DB", result: "env3@db3" }
  ],
  ENV4: [
    { name: "Linux Details", result: "env4@server" },
    { name: "Owner DB", result: "env4@db4" }
  ],
  ENV5: [
    { name: "Linux Details", result: "env5@server" },
    { name: "Owner DB", result: "env5@db5" }
  ],
  ENV6: [
    { name: "Linux Details", result: "env6@server" },
    { name: "Owner DB", result: "env6@db6" }
  ]
};

function func(x) {
  const selectedEnv = x.value;
  const table = document.querySelector("table");
  
  // 每次切换环境先清空表格，避免内容重复
  clearTable(table);

  if (selectedEnv === "0") {
    alert("Please select an option");
    return;
  }

  // 获取选中环境的详情数据
  const details = envDetails[selectedEnv];
  if (!details) {
    alert("No details available for this environment");
    return;
  }

  // 生成表格头部和内容
  const headers = Object.keys(details[0]);
  generateTableHead(table, headers);
  generateTable(table, details);
}

function clearTable(table) {
  // 清空表格所有内容
  table.innerHTML = "";
}

function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

function getOption() {
  const selectElement = document.querySelector('#select1');
  const output = selectElement.options[selectElement.selectedIndex].value;
  document.querySelector('.output').textContent = output;
  console.log(output);
}

关键修改说明 #

1. 统一管理环境数据：将所有环境详情存入envDetails对象，通过环境名称直接调用，避免零散的变量声明，也方便后续扩展。
2. 修复作用域问题：不再依赖全局变量，选中环境后直接从envDetails获取对应数据，解决原代码页面加载时的变量未定义报错。
3. 添加表格清空逻辑：每次切换环境前清空表格内容，防止多次生成导致内容叠加。
4. 触发表格生成：选中有效环境后，直接调用表格生成函数，完成详情展示。
5. 代码规范优化：为未声明的变量添加const/let，避免全局变量污染。

内容的提问来源于stack exchange，提问作者Carlos Andre Cardoso