使用数组作为select表单选项后，如何获取选中值的名称？

嘿，别慌！刚接触编程的时候，我也在select表单的选中值获取上卡过壳，特别能理解你的困惑😎

先假设你大概是用类似下面的代码生成select选项的（如果和你的代码有出入，你可以调整思路）：

// 示例数组
const fruitList = ["苹果", "香蕉", "橙子", "草莓"];
// 获取select元素
const fruitSelect = document.getElementById("fruitSelect");

// 循环数组生成option
fruitList.forEach(fruit => {
  const option = document.createElement("option");
  option.value = fruit; // 这里可能是你设置的value，也可能是数组索引
  option.textContent = fruit; // 这就是你说的「选中值的名称」
  fruitSelect.appendChild(option);
});

下面给你两种最常用的原生JavaScript方法来获取选中项的文本：

方法一：通过selectedIndex定位选项 #

这种方法兼容性很好，适合所有浏览器：

// 获取select元素
const selectEl = document.getElementById("fruitSelect");
// 获取选中项的文本内容
const selectedText = selectEl.options[selectEl.selectedIndex].textContent;
console.log("当前选中的名称：", selectedText);

方法二：用selectedOptions直接获取选中项 #

这种方法更直观，是ES6之后支持的写法：

const selectEl = document.getElementById("fruitSelect");
// 因为是单选select，所以取第一个选中项即可
const selectedOption = selectEl.selectedOptions[0];
if (selectedOption) { // 防止没有选中项的情况
  const selectedText = selectedOption.textContent;
  console.log("当前选中的名称：", selectedText);
}

给select添加选择事件监听 #

如果你想在用户切换选择时自动获取选中项的名称，可以绑定change事件：

const selectEl = document.getElementById("fruitSelect");
selectEl.addEventListener("change", function() {
  // 这里用this指代当前的select元素
  const selectedText = this.options[this.selectedIndex].textContent;
  alert("你选中了：" + selectedText);
});

如果你是用jQuery开发的，也可以用更简洁的写法：

// 获取选中项文本
const selectedText = $("#fruitSelect option:selected").text();
// 绑定change事件
$("#fruitSelect").on("change", function() {
  const selectedText = $(this).find("option:selected").text();
  console.log("选中的名称：", selectedText);
});

如果之前尝试没效果，大概率是这两个原因：

• 没有正确获取到select元素（检查id是否写错，或者代码执行时机是否在DOM加载完成后）
• 混淆了value和textContent：selectEl.value拿到的是option的value属性值，而你要的是显示的文本，所以得取option元素的textContent/innerText

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