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

JQuery set dropdown list box selected option - not by value, but by display text

本文关键字：文本 显示 下拉列表 设置 选项 JQuery      更新时间：2023-09-26

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

假设我们有以下 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"来标识项目，JQuery 命令将"我的自定义值 2"设置为下拉列表框中当前选定的选项会是什么样子？

你可以使用 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>

简单地像这样：

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

另一种方式...使用包含选择器按内容搜索 DOM 选项。

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

人们喜欢说使用 .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>

ddlListItems 是 ListBox 的 ID

if ($('#ddlListItems option:selected').text() == 'My Custom Value 2') {
                var itemsByValue = $('#ddlListItems option:selected').text();                   
            }
相关文章：