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

Question

我有以下HTML 元素：    5265241    6524125 我想使选定的选项成为标记，其文本内容为6524125。 我尝试使用以下代码来做到这一点： document.getElementById（“ account”）。value =“ 6524125”; 尽管这不起作用，但如何通过文本设置此元素的值？ 更新：是的，我正在使用jQuery，这是到目前为止的代码： $（“ option：contains（'6524125'）”）。prop（“ selected”，true）;

2 个答案:

答案 0 :(得分：4)

您可以在option中的select元素中循环查找匹配项，例如：

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

答案 1 :(得分：2)

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

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代码段。

如果您使用的是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的更多信息。

祝你好运。

相关问题

• 在<select>元素</select> </option>中检索所选<option>的文本
• 我们如何使用<option> text </option> <option> </option> </select> </option>中的文本在<select>中选择<option>的值
• 通过另一个选择选择选项设置选择选项
• 每当我选择其他选项时，如何重置所选选项的内容值？
• 如何通过它的文本值隐藏选项的选项？
• 如何从选择而不是选定的选项文本访问文本，但选择窗格中显示的内容是什么？
• 如何在HTML中的select /选项中选择所选选项？
• 如何通过JavaScript中的文本内容选择HTML“ <select>”的选定“ <option>”？
• 如何用文本内容替换html对象？
• 如果我在之前的选择中选择了一个选项，请删除输入字段

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

您可以在option中的select元素中循环查找匹配项，例如：

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

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

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代码段。

如果您使用的是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的更多信息。

祝你好运。