如何通过选项标签的内容过滤/选择 <select> 的 <option>？答案

【问题标题】：How do you filter/select a <select>'s <option> by the contents of the option tag?如何通过选项标签的内容过滤/选择 <select> 的 <option>？
【发布时间】：2020-07-31 11:36:52
【问题描述】：

我找到了很多关于如何提取<option> 标签的值或标签本身的内容的答案，`content here'

但是，我想知道是否有办法通过 <option>text here</option> 的文本值选择选项 - 在这种情况下，使用 text here 作为匹配项。

我正在构建一个非常简单的内部使用表单 - 根据第一个下拉列表的选择，它将有效地限制第二个下拉列表中的选项数量。但是，由于这是 CMS 的一部分，因此使用块的 value 属性不会是一项可靠的工作。我知道下拉菜单的文本参数的拼写和措辞很重要，并且会是我需要的。

我知道这不是一个好习惯 - 相信我，我知道这一点。然而，现在这是我需要尽快完成的事情，并且尽可能少地投入时间。在不重新发明或重做这个已有十年历史的工具的所有逻辑的情况下，我会选择这条路线。

那么，是否可以通过标签的内部文本进行过滤？我知道你可以提取它，但我们想要过滤，以便我们可以限制用户可以选择的选项。


    <select id="one">
        <option value="a">eh</option>
        <option value="b">bee</option>
    </select>

    <select id="two">
        <option value="m">emm</option>
        <option value="lw">lolwot</option>
        <option value="p">dinner</option>
    </select>

在这种情况下，如果他们从第一个下拉菜单中选择 'b' - 它会将他们的选择限制为 -only- 在第二个下拉菜单中 lolwot - 删除 emm 和 dinner。

重申一下，我不想从选定的选项中提取。 $('#two').find('option:selected').text() 不是我要找的。p>

【问题讨论】：

你能解释一下第一个下拉菜单中的“b”与第二个下拉菜单中的“lw”有什么关系吗？
另外，您在寻找$('#two option:contains("lolwot")') 吗？
Need to know the logic or lack of logic involved in determining what specifically happens when select A has a selected text and how select B knows what to remove?就像@devlincarnate 已经评论过的那样 > 为什么“bee”=“lowot”？
它们只是示例值

标签： javascript jquery select filter

【解决方案1】：

是的，这是可能的。假设您想保留具有 lolwot 内部文本的那个，您可以执行以下操作：

[...document.getElementById("two").children].forEach((item) => {if (item.innerText !== "lolwot") item.remove()})

我们通过 id 和方括号内的子项获取项目
我们将其转换为数组，因此我们有一个子数组
我们迭代这个数组
如果当前项目不符合条件，我们只需将其删除

如果你想删除项目，那么你可以过滤：

[...document.getElementById("two").children].filter((item) => (item.innerText !== "lolwot"))

【讨论】：