如何在JavaScript中根据指定文本获取下拉列表的对应选中值？

没问题，这是前端开发里很常见的需求，我结合你提到的「值1对应文本'One'、值5对应文本'Five'」这类场景，给你两种常用的实现方式：原生JavaScript和jQuery（如果你的项目在用的话）。

先准备示例下拉列表HTML #

首先我们先搭好对应的下拉列表结构，方便后续测试：

<select id="numberDropdown">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
  <option value="9">Nine</option>
  <option value="10">Ten</option>
</select>

方法一：原生JavaScript实现 #

核心思路是遍历下拉列表的所有选项，找到文本匹配的项，然后设置它为选中状态。我封装成一个可复用的函数，你直接调用就行：

function selectOptionByText(selectElementId, targetText) {
  // 获取下拉列表元素
  const select = document.getElementById(selectElementId);
  if (!select) return; // 防止元素不存在报错

  // 遍历所有选项
  for (let i = 0; i < select.options.length; i++) {
    const option = select.options[i];
    // 匹配文本（trim去除前后空格，toLowerCase实现大小写不敏感匹配，可根据需求调整）
    if (option.textContent.trim().toLowerCase() === targetText.toLowerCase()) {
      option.selected = true; // 设置为选中
      break; // 找到匹配项后停止遍历，提升效率
    }
  }
}

// 调用函数：传入下拉列表ID和目标文本'Five'
selectOptionByText('numberDropdown', 'Five');

额外说明 #

• 如果你的需求是严格区分大小写，去掉.toLowerCase()即可；
• 如果需要获取匹配到的对应值（而不仅仅是选中），可以在找到匹配项后返回option.value，比如：

  function getValueByText(selectElementId, targetText) {
    const select = document.getElementById(selectElementId);
    if (!select) return null;
    for (let i = 0; i < select.options.length; i++) {
      const option = select.options[i];
      if (option.textContent.trim() === targetText) {
        return option.value; // 返回对应的值
      }
    }
    return null; // 没找到匹配项返回null
  }
  
  // 使用示例：获取'Five'对应的值
  const fiveValue = getValueByText('numberDropdown', 'Five');
  console.log(fiveValue); // 输出：5
  

方法二：jQuery实现（如果项目已引入jQuery） #

如果你的项目在用jQuery，代码会更简洁：

// 精确匹配文本（推荐，避免包含匹配的误判）
$('#numberDropdown option').filter(function() {
  return $(this).text().trim() === 'Five';
}).prop('selected', true);

// 如果要大小写不敏感匹配，改成：
// return $(this).text().trim().toLowerCase() === 'Five'.toLowerCase();

注意 #

不要直接用$('#numberDropdown option:contains("Five")')，因为contains是包含匹配，如果有选项文本是'Fivexxx'也会被选中，精确匹配还是用filter更稳妥。

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