JavaScript中for循环生成的select下拉选项无法获取选中项textContent怎么办

问题根源 #

现有代码中document.querySelector('option')的匹配规则是返回文档内第一个符合条件的<option>元素，和下拉框的选中状态无关联，因此永远返回第一个选项的值。

修复示例代码 #

要获取当前选中的选项，需要先定位到对应的<select>元素，再通过其内置的selectedOptions属性获取选中项，修复后的代码如下：

function outputOptionTextContent(){
  const select = document.querySelector('select');
  const selectedOption = select.selectedOptions[0];
  // 如需兼容低版本IE，可替换上一行为：const selectedOption = select.options[select.selectedIndex];
  if (selectedOption.textContent === "3"){
    console.log(true);
  }
  else {
    console.log(false);
  }
}

适配业务场景的完整实现 #

针对你从GET接口获取JSON数据、选中对应name触发函数的需求，建议直接给<select>绑定change事件，选中后自动完成匹配和函数触发，完整逻辑如下：

// 假设为GET请求返回的JSON数据
const dynamicData = [
  {name: "功能1", action: () => {console.log("执行功能1的逻辑")}},
  {name: "功能2", action: () => {console.log("执行功能2的逻辑")}},
  {name: "功能3", action: () => {console.log("执行功能3的逻辑")}}
]

function initSelect(){
  const select = document.querySelector('select');
  // 清空原有选项，防止重复渲染
  select.innerHTML = '';
  // 批量生成option
  dynamicData.forEach(item => {
    const option = document.createElement('option');
    option.textContent = item.name;
    // 若存在唯一标识，可赋值给option.value，后续匹配用value更稳妥
    // option.value = item.id
    select.appendChild(option);
  })
  // 绑定选中事件
  select.addEventListener('change', () => {
    const currentSelectedName = select.selectedOptions[0].textContent;
    // 匹配对应配置项
    const targetItem = dynamicData.find(i => i.name === currentSelectedName);
    if(targetItem) {
      targetItem.action();
    }
  })
}

优化建议 #

如果存在多个name相同的选项，建议给每个option设置唯一的value属性（比如接口返回的id字段），匹配时通过selectedOption.value比对，避免同名导致的匹配错误。

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