如何通过下拉选择框选中对应const并在表格中展示数据？

原代码存在的核心问题 #

• 变量命名不合法：JavaScript中变量名不能以数字开头，const 1 = ...这类写法会直接触发语法错误。
• 数据格式错误：你想用键值对存储设备信息，却误用了数组[]，正确的键值对结构应该用对象{}。
• JS逻辑缺失：没有绑定下拉框的change事件来触发数据更新，且var text = selected option value是无效语法，无法正确获取选中值和关联数据。
• 缺少表格DOM结构：页面中没有定义用于展示Name、Code、Speed的元素，无法将数据插入到页面中。

修正后的完整可运行代码 #

HTML部分

<select id="deviceSelect" name="select">
  <option value="1">Device 1</option>
  <option value="2">Device 2</option>
  <option value="3">Device 3</option>
</select>

<!-- 用于展示数据的表格结构 -->
<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <td>Name:</td>
    <td id="nameCell"></td>
  </tr>
  <tr>
    <td>Code:</td>
    <td id="codeCell"></td>
  </tr>
  <tr>
    <td>Speed:</td>
    <td id="speedCell"></td>
  </tr>
</table>

JavaScript部分

// 用对象统一存储设备数据，键与下拉框的value值对应
const deviceData = {
  1: { Name: "Name 1", Code: "Code 1", Speed: "10" },
  2: { Name: "Name 2", Code: "Code 2", Speed: "20" },
  3: { Name: "Name 3", Code: "Code 3", Speed: "30" }
};

// 获取页面元素
const selectElement = document.getElementById('deviceSelect');
const nameCell = document.getElementById('nameCell');
const codeCell = document.getElementById('codeCell');
const speedCell = document.getElementById('speedCell');

// 表格更新函数
function updateTable(selectedValue) {
  const targetDevice = deviceData[selectedValue];
  nameCell.textContent = targetDevice.Name;
  codeCell.textContent = targetDevice.Code;
  speedCell.textContent = targetDevice.Speed;
}

// 绑定下拉框切换事件
selectElement.addEventListener('change', function() {
  updateTable(this.value);
});

// 页面加载时初始化显示默认选中项的数据
updateTable(selectElement.value);

关键修正说明 #

1. 数据结构优化：用单个对象deviceData映射下拉框值与设备数据，比单独定义多个变量更易维护和扩展。
2. 事件驱动更新：给下拉框添加change事件监听器，每次切换选项时自动触发表格数据更新。
3. 安全的DOM操作：使用textContent替代innerHTML，避免潜在的XSS风险，同时确保文本内容正确渲染。
4. 初始化处理：页面加载时自动展示默认选中设备的数据，避免初始状态表格为空。

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