javascript - 如何通过 JavaScript 中的文本内容选择 HTML "<option>"的选定 "<select>"？

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 中所示。 .