通过基于 jquery 的值通配符从 Select 中删除值答案

【问题标题】：Remove values from Select via jquery based value wildcard通过基于 jquery 的值通配符从 Select 中删除值
【发布时间】：2021-02-17 09:14:06
【问题描述】：

我有一个脚本，我想遍历一个名为“Date”的 SELECT 并从 SELECT 中删除 OPTIONS，如果它们不是 %like% 我的搜索词。

HTML -

<input type=text id="filteredlanguages" hidden value="Spanish, Latin">

<select name="Date" id="Date" class="form-control input-lg">
<option value="selection">Select Date</option>
<option value="2021-01-11T00:00:00.000Z">11 January - 12 March (English)</option>
<option value="2021-03-22T00:00:00.000Z">22 March - 21 May (Spanish)</option>
<option value="">I havent decided yet</option></select>

var filteredLanguages = $('#filteredlanguages').val().split(",");
$("#Date > option").each(function(i){
        if($.inArray($(this).val(), filteredLanguages) == -1) {
                //alert($(this).val());
                if ($(this).val() != "selection") {
                    $("#Date option[value='"+$(this).val()+"']").remove();
                }
        }
});`

所以基本上我的搜索词是“西班牙语”和“拉丁语”，根据元素#filteredlanguages 我希望 jquery 代码从 Date Select Element 中删除每个 OPTION，如果它不包含单词“Spanish”或“Latin”。

我希望有人可以提供帮助。谢谢

【问题讨论】：

您有单个搜索词吗？就像您的示例“西班牙语”和您的问题“我的搜索词”“值通配符”一样 - 或者您是否有多个搜索词 ["Spanish","Latin"] 就像您的代码 .split(",") 一样？如果是多个，它必须匹配全部还是任意？
多个搜索词是的。所以如果是西班牙语，英语则删除所有不包含这些词的选项。

标签： jquery forms select

【解决方案1】：

您的代码中有一些问题：

您应该在正则表达式上拆分 filteredlanguages 以允许单词之间有空格
您正在将选项的value（它是一个日期字符串）与语言进行比较；您应该改为比较选项的文本。
您应该检查选项文本中是否存在任何filteredLanguages 值；你可以用Array.some做到这一点
您可以简单地使用$(this).remove() 删除选项

这段代码会做你想做的事：

var filteredLanguages = $('#filteredlanguages').val().split(/\s*,\s/);
$('#Date > option').each(function(i) {
  let val = $(this).val();
  if (val == 'selection' || val == '') return;
  let text = $(this).text();
  if (!filteredLanguages.some(l => text.includes(l))) {
    $(this).remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id="filteredlanguages" hidden value="Spanish, Latin">

<select name="Date" id="Date" class="form-control input-lg">
  <option value="selection">Select Date</option>
  <option value="2021-01-11T00:00:00.000Z">11 January - 12 March (English)</option>
  <option value="2021-03-22T00:00:00.000Z">22 March - 21 May (Spanish)</option>
  <option value="">I havent decided yet</option>
</select>

【讨论】：

@CraigJohnstone 不用担心 - 我很高兴能提供帮助。