如何从表单下拉列表选中项获取对应JS数组值？

你的代码没法正常工作，核心问题是没正确获取下拉框的选中状态，且candidates[n]不是有效的数组索引——candidates是DOM元素，不是索引值，自然没法匹配到图片数组。下面给两种靠谱的实现方式：

方案1：基于选项索引关联数组（简单直接） #

利用下拉框选中项的索引，对应图片数组的位置（注意第一个是提示项，索引要做偏移）：

// 获取下拉框DOM元素
const selectElement = document.getElementById('candidates');

// 监听下拉框选择变化（也可以在需要获取的时候直接执行逻辑）
selectElement.addEventListener('change', function() {
  const selectedIndex = this.selectedIndex;
  let finalSelectedCandidate;

  // 排除第一个"Pick one"的提示选项
  if (selectedIndex > 0) {
    // 选中项索引减1，对应图片数组的索引（数组从0开始，候选人从索引1开始）
    finalSelectedCandidate = selectedcandidate[selectedIndex - 1];
    console.log(finalSelectedCandidate); // 输出对应图片路径
  } else {
    finalSelectedCandidate = null; // 未选有效候选人时的处理
  }
});

方案2：用对象映射（更健壮，不易出错） #

如果后续候选人的value或顺序可能变动，用键值对映射比依赖索引更可靠：
首先把图片数组改成对象，明确对应关系：

// 用对象存储候选人与图片的映射
const candidateImageMap = {
  "Candidate 1": "/image1.png",
  "Candidate 2": "/image2.png",
  "Candidate 3": "/image3.png"
};

然后通过选中的value匹配：

const selectElement = document.getElementById('candidates');

selectElement.addEventListener('change', function() {
  const selectedValue = this.value;
  let finalSelectedCandidate;

  // 跳过提示选项
  if (selectedValue !== "select") {
    finalSelectedCandidate = candidateImageMap[selectedValue];
    console.log(finalSelectedCandidate);
  } else {
    finalSelectedCandidate = null;
  }
});

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