JQuery 设置下拉列表框选择选项 - 不是按值，而是按显示文本答案

【问题标题】：JQuery set dropdown list box selected option - not by value, but by display textJQuery 设置下拉列表框选择选项 - 不是按值，而是按显示文本
【发布时间】：2015-02-14 00:47:37
【问题描述】：

这可能已经回答了，但我无法在任何地方找到已回答的问题...

假设我们有以下 HTML...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dropdown Test</title>
    </head>
    <body>
        <select name="myDropDownListName" id="myDropDownListID" class="dropdown">
            <option selected="selected" value="0">Please select a value...</option>
            <option value="1">My Custom Value 1</option>
            <option value="2">My Custom Value 2</option>
            <option value="3">My Custom Value 3</option>
        </select>
    </body>
</html>

假设我不知道索引“值”值，并且只能通过文本“我的自定义值 2”？

【问题讨论】：

这将帮助您link 获得价值。
jquery : How to select an option by its text?的可能重复
在这里回答：stackoverflow.com/questions/17856523/…

标签： javascript jquery html

【解决方案1】：

你可以使用jquery .filter():

$('#myDropDownListID option').filter(function() {
    //you can use this.innerText too
    return $(this).text() === 'My Custom Value 2';
}).prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myDropDownListName" id="myDropDownListID" class="dropdown">
  <option selected="selected" value="0">Please select a value...</option>
  <option value="1">My Custom Value 1</option>
  <option value="2">My Custom Value 2</option>
  <option value="3">My Custom Value 3</option>
</select>

【讨论】：

我喜欢所有的答案，但我认为这个是最好的。与我的现实问题相比，我的例子似乎太微不足道了。其他答案使用可能找到部分匹配的“包含”运算符，而这个答案简洁明了。此外，此示例按 id 引用下拉列表，而不是按元素类型。
我同意，但是“另外，此示例通过 id 引用下拉列表，而不是按元素类型”是相同的，您可以使用 #myDropDownListID 代替 select。

【解决方案2】：

就像这样：

$('select').val($("select option:contains('My custom Value 2')").val());

【讨论】：

【解决方案3】：

另一种方式...使用contains selector 按内容搜索 DOM 元素。

$('select>option:contains("My Custom Value 2")').prop('selected', true);

【讨论】：

你能解释一下代码行，让原发帖人明白为什么会这样吗？

【解决方案4】：

人们喜欢说使用.val()，但正如您注意到的，它不喜欢通过文本设置，而是使用索引。所以你应该做一个find 来得到它，然后由它设置。但即便如此，这也只是故事的一部分。您应该首先取消选择所有其他选项，然后使用您找到的索引将所需选项的属性设置为selected。

顺便说一句，我讨厌 $('#myDropDownListID') 语法，因为它在 SharePoint 中毫无用处，因为它会自动生成 GUID 并将它们放在 ID 之后，迫使您必须使用 $('[id*=myDropDownListID]') 获取它，而 * 表示contains 那个值，这就是我将如何设置它，除了我将省略 * 因为在这种情况下它是不必要的。但是如果你想用$而不是*来表示starts with那个值，这个语法也很有用，而且你可以用title或者name来代替id，所以非常不可思议用途广泛，希望更多人使用。

$(document).ready(function() {
    var yourText = "My Custom Value 2";

    // Remove all 'selected' attributes from all options
    $('select[id="myDropDownListID"] option').removeAttr('selected');

    // Get the index for the value you want to set
    var idx = $('select[id="myDropDownListID"] option').filter(function() {
        return $(this).html() == yourText;
    }).val();

    // Set the dropdown value by index and set it as selected by text
    var dropdownBox = $('select[id="myDropDownListID"]');
    dropdownBox.val(idx);
    dropdownBox.find('option[value="' + yourValue + '"]').attr('selected','selected'); // note that .val() doesn't do this
    dropdownBox.click(); // may be useful and necessary for certain engines to cache the value appropriately

    console.log(dropdownBox.html()); // should show you that the selected option is My Custom Value 2
    console.log(dropdownBox.val());  // should give you the index 2

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="myDropDownListID">
    <option value="1">My Custom Value 1</option>
    <option value="2">My Custom Value 2</option>
    <option value="3">My Custom Value 3</option>
</select>

【讨论】：