如何为表格筛选器的单个选项实现多值匹配（Trainer类）

我是一名自学的非专业开发者，目前正在制作带筛选选项的列表，现有如下HTML筛选控件：

<select id="idTyp">
    <option value="all">Alle Typen</option>
    <option value="Pflanze">Pflanze</option>
    <option value="Feuer">Feuer</option>
    <option value="Wasser">Wasser</option>
    <option value="Elektro">Elektro</option>
    <option value="Psycho">Psycho</option>
    <option value="Kampf">Kampf</option>
    <option value="Finsternis">Finsternis</option>
    <option value="Metall">Metall</option>
    <option value="Fee">Fee</option>
    <option value="Drache">Drache</option>
    <option value="Farblos">Farblos</option>
    <!-- 修正原代码错误：一个option不能同时设置多个value属性 -->
    <option value="Trainer">Trainer</option>
    <option value="Spezial-Energie">Spezial-Energie</option>
</select>

<select id="idSeltenheit">
    <option value="all">Alle Stufen</option>
    <option value="häufig">häufig</option>
    <option value="nicht so häufig">nicht so häufig</option>
    <option value="selten">selten</option>
    <option value="selten, holo">selten, holo</option>
    <option value="ultraselten">ultraselten</option>
    <option value="selten, holo GX">selten, holo GX</option>
    <option value="selten, prisma-stern">selten, prisma-stern</option>
    <option value="selten, regenbogen">selten, regenbogen</option>
    <option value="selten, geheim">selten, geheim</option>
</select>

<input type="button" onclick="SearchData();" value="Filtern" />

对应的JS筛选逻辑如下：

const table = document.getElementById("cardListTable");
const tr = table.getElementsByTagName("tr");

function SearchData() {
    var typ = document.getElementById("idTyp").value.toUpperCase();
    var seltenheit = document.getElementById("idSeltenheit").value.toUpperCase();

    for (i = 1; i < tr.length; i++) {
        var rowTyp = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
        var rowSeltenheit = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();
        var isDiplay = true;

        if (typ != 'ALL' && rowTyp != typ) {
            isDiplay = false;
        }
        if (seltenheit != 'ALL' && rowSeltenheit != seltenheit) {
            isDiplay = false;
        }

        if (isDiplay) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

当前需求：让idTyp下拉框中的Trainer选项能够同时匹配Trainer (I)、Trainer (A)、Trainer (U)等多个值。

最优实现方案 #

方案一：字符串包含匹配（简单快速，适配现有结构） #

无需修改HTML，仅调整JS的类型判断逻辑：当选中Trainer时，判断行数据的类型是否包含Trainer关键词，而非严格相等。

修改后的JS代码：

const table = document.getElementById("cardListTable");
const tr = table.getElementsByTagName("tr");

function SearchData() {
    var typ = document.getElementById("idTyp").value.toUpperCase();
    var seltenheit = document.getElementById("idSeltenheit").value.toUpperCase();

    for (i = 1; i < tr.length; i++) {
        var rowTyp = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
        var rowSeltenheit = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();
        var isDiplay = true;

        // 调整类型判断逻辑
        if (typ != 'ALL') {
            if (typ === 'TRAINER') {
                // 匹配所有包含TRAINER的类型
                if (!rowTyp.includes('TRAINER')) {
                    isDiplay = false;
                }
            } else {
                // 其他类型保持严格匹配
                if (rowTyp != typ) {
                    isDiplay = false;
                }
            }
        }

        if (seltenheit != 'ALL' && rowSeltenheit != seltenheit) {
            isDiplay = false;
        }

        tr[i].style.display = isDiplay ? "" : "none";
    }
}

优点：代码改动极小，快速见效，适合当前简单的筛选场景。

方案二：自定义数据属性（扩展性更强，规范可控） #

若未来可能新增更多多值匹配的选项，推荐用这种方式：通过给option添加data-match属性定义匹配规则，JS逻辑通用化。

第一步：修改HTML的Trainer选项

<option value="Trainer" data-match='["Trainer (I)", "Trainer (A)", "Trainer (U)"]'>Trainer</option>

第二步：修改JS逻辑

const table = document.getElementById("cardListTable");
const tr = table.getElementsByTagName("tr");

function SearchData() {
    const typSelect = document.getElementById("idTyp");
    var typ = typSelect.value.toUpperCase();
    // 解析当前选中选项的匹配规则数组（统一转大写）
    const matchValues = typSelect.selectedOptions[0].dataset.match 
        ? JSON.parse(typSelect.selectedOptions[0].dataset.match).map(val => val.toUpperCase())
        : [];

    var seltenheit = document.getElementById("idSeltenheit").value.toUpperCase();

    for (i = 1; i < tr.length; i++) {
        var rowTyp = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
        var rowSeltenheit = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();
        var isDiplay = true;

        if (typ != 'ALL') {
            if (matchValues.length > 0) {
                // 按规则数组匹配
                if (!matchValues.includes(rowTyp)) {
                    isDiplay = false;
                }
            } else {
                // 无规则则严格匹配
                if (rowTyp != typ) {
                    isDiplay = false;
                }
            }
        }

        if (seltenheit != 'ALL' && rowSeltenheit != seltenheit) {
            isDiplay = false;
        }

        tr[i].style.display = isDiplay ? "" : "none";
    }
}

优点：匹配规则完全定义在HTML中，JS逻辑通用，后续新增多值匹配选项时，仅需修改HTML的data-match属性，无需改动JS代码，扩展性强。

内容的提问来源于stack exchange，提问作者kekr91