如何通过选项文本获取下拉框（Dropdown）的选项值

嘿，我明白你在维护遗留系统时遇到的问题了——要通过选项文本反向获取对应的value值对吧？你的代码里有个小问题导致它无效，咱们一步步来修正：

你的代码问题所在 #

你写的选择器 $('#myselect option[option="' + optionText + '"]') 是错误的：<option> 标签并没有名为 option 的属性，你要匹配的是选项的文本内容，而不是某个属性的值，所以这个选择器找不到任何元素，自然返回 undefined。

两种可行的解决方案 #

方案1：使用:contains()选择器（简单快速） #

如果你确定下拉框里不会有文本内容部分匹配的选项（比如不会同时存在"Two"和"Twotest"），可以直接用:contains()选择器匹配文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<select id="myselect" name="myselect">
    <option value="0">Zero</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<script>
$(document).ready(function(){
    var optionText = 'Two';
    // 修正后的选择器
    console.log($('#myselect option:contains("' + optionText + '")').attr("value"));
});
</script>
</body>
</html>

方案2：使用.filter()方法（精确匹配，避免部分匹配） #

如果担心有文本部分重叠的选项，推荐用.filter()方法做精确匹配，同时还能处理文本前后的空格问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<select id="myselect" name="myselect">
    <option value="0">Zero</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<script>
$(document).ready(function(){
    var optionText = 'Two';
    var targetValue = $('#myselect option').filter(function() {
        // 用trim()去除文本前后可能存在的空格，确保精确匹配
        return $(this).text().trim() === optionText;
    }).attr('value');
    console.log(targetValue); // 输出：2
});
</script>
</body>
</html>

这样就能准确拿到对应选项的value值啦！

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