jquery - 如何通过文本获取选择选项的值

Question

我有一个类似于以下的下拉列表：

<select type="select" id="ddl">
    <option value="0">Select...</option>
    <option value="1">Blue</option>
    <option value="2">Red</option>
    <option value="3">Green</option>
    <option value="4">Yellow</option>
</select>

当我有文本时，我需要获取一个选项的值，而不管是否选择了任何内容。

我试过$('#ddl[text=Blue]).value()了，但这行不通。我不知道还能尝试什么。

谢谢。

选择示例已修复（我复制/粘贴了错误的行 - 哎呀！;)）

Answer 1

您的代码存在一些问题：

$('#ddlDirector[text=Blue]).value()

1. id只是，ddl不是ddlDirector。
2. 您正在尝试将属性等于选择器应用于该元素（当您想将其应用于其中的<option>元素时）。
3. 您正在尝试使用attribute-equals选择器，但元素上没有text属性。<option>

您可以使用:contains选择器：

$('#ddl option:contains("Blue")').val();

如果您要经常使用它，则可能值得创建一个函数来执行此操作：

function getValueFromText(selectId, optionText) {
    return $('#' + selectId + ' option:contains("' + optionText + '")').val();
}

然后调用它：

var blueValue = getValueFromText('ddl', 'Blue');

Answer 2

我可以想到两个选择：

如果通配符搜索正常（例如匹配“Blue”和“Blues”），第一个将起作用：

$('#ddl option:contains("Blue")').val();

这将仅找到完全匹配：

$('#ddl option').filter(function() { return $(this).text() == 'Blue'; }).val();

http://jsfiddle.net/TEqef/

Answer 3

JSFiddle：http: //jsfiddle.net/thfg5/2/

var color = "Red";
alert($('#ddl option:contains("' + color + '")').attr("value"));