如何通过 JavaScript 中的文本内容选择 HTML“<select>”的选定“<option>”？ [关闭]

Question

我有以下 HTML <select> 元素：

<select id="account" class="form-control" name="account">
  <option value="USFSDsdfsFLIJSD656FKLLS5admFOWEJF0SOF">5265241</option>
  <option value="LDSOJFksdfo52slkdfjskdfooojoijoijoj56">6524125</option>
</select>

我想将所选选项设为<option> 标记，文本内容为6524125。

我已尝试使用以下代码：

document.getElementById("account").value = "6524125";

虽然这不起作用，但如何通过文本设置此 <select> 元素的值？

更新：是的，我正在使用 jQuery，这是我目前的代码：

$("option:contains('6524125')").prop("selected", true);

Answer 1

您可以遍历select 中的option 元素以查找匹配项，例如：

const text = "6524125";
const options = document.getElementById("account").options;
for (let n = 0; n < options.length; ++n) {
    const option = options[n];
    if (option.text === text) {
        option.selected = true;
        break;
    }
}

<select id="account" class="form-control" name="account">
    <option value="USFSDsdfsFLIJSD656FKLLS5admFOWEJF0SOF">5265241</option>
    <option value="LDSOJFksdfo52slkdfjskdfooojoijoijoj56">6524125</option>
</select>

在一些现代环境中options 是可迭代的，所以你可以更简洁地做到这一点：

const text = "6524125";
for (const option of document.getElementById("account").options) {
    if (option.text === text) {
        option.selected = true;
        break;
    }
}

<select id="account" class="form-control" name="account">
    <option value="USFSDsdfsFLIJSD656FKLLS5admFOWEJF0SOF">5265241</option>
    <option value="LDSOJFksdfo52slkdfjskdfooojoijoijoj56">6524125</option>
</select>

该规范并不要求options 是可迭代的（它是一个HTMLOptionsCollection，它继承自HTMLCollection，与NodeList 不同的是它是不可迭代的）。如果您在自己的应用程序或页面（而不是库）中执行此操作，则可以使 HTMLCollection 可迭代，如 this answer 所示。

Answer 2

您可以使用Array.prototype.forEach 方法循环遍历您的元素并将该元素的selected 属性设置为true，如果其textContent 匹配指定值，如下所示：

const text = "6524125";
[...document.getElementsByTagName("option")].forEach(element => {
  if (element.textContent === text) {
    element.selected = true;
  }
});

<select id="account" class="form-control" name="account">
  <option value="USFSDsdfsFLIJSD656FKLLS5admFOWEJF0SOF">5265241</option>
  <option value="LDSOJFksdfo52slkdfjskdfooojoijoijoj56">6524125</option>
</select>

另一种方法是手动设置目标option 元素的selected 属性，这样您就不必编写过多的代码。

换句话说，您可以用一个 HTML 属性替换大约 6 行 JavaScript。

如果你只想set the default value for an HTML "<select>" element，这也很棒。

例如：

<select id="account" class="form-control" name="account">
  <option value="USFSDsdfsFLIJSD656FKLLS5admFOWEJF0SOF">5265241</option>
  <option value="LDSOJFksdfo52slkdfjskdfooojoijoijoj56" selected="selected">6524125</option>
</select>

更新：我刚刚看到您在 comments section of T.J. Crowder's post 中包含了一个 jQuery sn-p。

如果您使用的是 jQuery，那么您可以使用:contains 选择器和jQuery.fn.attr 方法来选择目标选项并将其设置为selected 属性：

$("option:contains('6524125')").attr("selected", true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="account" class="form-control" name="account">
  <option value="USFSDsdfsFLIJSD656FKLLS5admFOWEJF0SOF">5265241</option>
  <option value="LDSOJFksdfo52slkdfjskdfooojoijoijoj56" selected="selected">6524125</option>
</select>

如果您想从目标元素的同级元素中删除 selected 属性，则可以使用 jQuery.fn.siblings 和 jQuery.fn.removeAttr 方法，如下所示：

$("option:contains('6524125')").attr("selected", true).siblings().removeAttr("selected");

注意：有关forEach 方法的更多信息，visit this link。

祝你好运。