纯JS实现：通过下拉选中值匹配访问多维数组的对应属性

概念澄清 #

你定义的flavors结构的准确称谓是对象数组：本质是普通数组，每个数组元素都是独立的JS对象。它不属于多维数组（多维数组的元素仍为数组）、映射（指JS Map结构）、数据帧这类上层封装结构。
你现有代码存在两个核心问题：

• select.onchange回调里的this指向select DOM元素本身，DOM元素不存在img_src属性，直接读取必然取不到值
• 你虽为每个option绑定了和数组项一一对应的id值，但没有建立id值与数组条目的检索关联

实现逻辑 #

仅用原生JS即可完成，无额外依赖：

1. 从下拉框的选中事件里拿到当前选中项的value值（即之前绑定的条目标识id）
2. 用这个id值匹配对象数组里的对应条目
3. 从匹配到的条目里读取需要的属性值（img_src、description等）

可直接运行的代码片段 #

替换你原有select.onchange的逻辑即可：

select.onchange = function fetch_info() {
  // DOM获取到的value是字符串类型，需要转成数字匹配数组里的id类型
  const selectedId = Number(this.value);
  // 查找数组中和id匹配的条目
  const matchedFlavor = flavors.find(item => item.id === selectedId);
  // 校验匹配成功后读取目标属性
  if (matchedFlavor) {
    alert(matchedFlavor.img_src);
    // 后续可在此处把img_src赋值给页面img标签的src属性、把description填充到对应文本节点
  }
}

如果课程进度还没涉及Array.find方法，可替换为普通for循环实现，逻辑完全一致：

select.onchange = function fetch_info() {
  const selectedId = Number(this.value);
  let matchedFlavor = null;
  for (let i = 0; i < flavors.length; i++) {
    if (flavors[i].id === selectedId) {
      matchedFlavor = flavors[i];
      break;
    }
  }
  if (matchedFlavor) {
    alert(matchedFlavor.img_src);
  }
}

可选优化 #

如果后续数组条目规模变大，可在初始化阶段提前生成id到条目的映射关系，避免每次选中都遍历数组：

// 初始化阶段生成id映射
const flavorIdMap = {};
flavors.forEach(item => {
  flavorIdMap[item.id] = item;
})
// onchange逻辑可简化为
select.onchange = function fetch_info() {
  const selectedId = Number(this.value);
  const matchedFlavor = flavorIdMap[selectedId];
  if (matchedFlavor) alert(matchedFlavor.img_src);
}

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