如何显示所选下拉列表的筛选数据组合？

Question

如何仅在与组合下拉列表匹配的值处显示数据？

现在，如果我从下拉列表 A 中选择值 Thulasiram.S，从下拉列表 B 中选择值 11。如果在我的数据中如果我有值 Thulasiram.S 和 Value 11 它显示所有匹配的结果。

Thulasiram.S 11 棋 1 天

ST Ram 11 板球 1 个月

所以，输出应该只显示

Thulasiram.S 11 棋 1 天

因为我从下拉列表 A 中选择了值 Thulasiram.S，从下拉列表 B 中选择了值 11。

求推荐。

$('#test213').click(function () {
    getSelectedVal()
});


function getSelectedVal() {
    var startDate = $('#option1 option:selected').text()
    var duetDate = $('#option2 option:selected').text()
    var templateName = $('#option3 option:selected').text()
    var status = $('#option4 option:selected').text()

    filterData(startDate)
    filterData(duetDate)
    filterData(templateName)
    filterData(status)
}


function filterData(data) {
    if (data != '') {
        var rows = $("#shelulerData").find("tr").hide();
        rows.filter(":contains('" + data + "')").show();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
    <option></option>
    <option>Thulasiram.S</option>
    <option>ST Ram</option>
    <option>Ram Kumar.S</option>
    <option>Dinesh Kumar.S  </option>
</select>

<select id="option2">
    <option></option>
    <option>11</option>
    <option>21</option>
    <option>30</option>
</select>

<select id="option3">
    <option></option>
    <option>Chess</option>
    <option>Cricket</option>
</select>
<select id="option4">
    <option></option>
    <option>Day</option>
    <option>Month</option>
    <option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
    <thead>
    </thead>
    <tbody id="shelulerData">
        <tr>
            <th>Fullname</th>
            <th>Age</th>
            <th>Sport</th>
            <th>Class </th>
            <th>Term</th>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
            <td>Thulasiram.S</td>
            <td>11</td>
            <td>Chess</td>
            <td>1</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
            <td>ST Ram</td>
            <td>11</td>
            <td>Cricket</td>
            <td>1</td>
            <td>Month</td>
        </tr>
        <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
            <td>Ram Kumar.S</td>
            <td>21</td>
            <td>Chess</td>
            <td>2</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
            <td>Dinesh Kumar.S</td>
            <td>30</td>
            <td>Chess</td>
            <td>3</td>
            <td>Week</td>
        </tr>
    </tbody>
</table>

Answer 1

您将需要创建复合过滤器。问题是你的第二个过滤器覆盖了第一个而不是调整它。

$('#test213').click(function () {
    getSelectedVal()
});


function getSelectedVal() {
    var startDate = $('#option1 option:selected').text();
    var duetDate = $('#option2 option:selected').text();
    var templateName = $('#option3 option:selected').text();
    var status = $('#option4 option:selected').text();

    filterData([startDate, duetDate, templateName, null, status]);
}


function filterData(data) {
    if (data != '') {
        var rows = $("#shelulerData").find("tr").hide();
        for (let row of rows) {
            let shouldShow = true;
            for (let index = 0; index < data.length; index++) {
                if (data[index]) shouldShow = shouldShow && (row.children[index].innerText === data[index]);
                //console.log([should])
            }
            if (shouldShow) $(row).show();
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
    <option></option>
    <option>Thulasiram.S</option>
    <option>ST Ram</option>
    <option>Ram Kumar.S</option>
    <option>Dinesh Kumar.S  </option>
</select>

<select id="option2">
    <option></option>
    <option>11</option>
    <option>21</option>
    <option>30</option>
</select>

<select id="option3">
    <option></option>
    <option>Chess</option>
    <option>Cricket</option>
</select>
<select id="option4">
    <option></option>
    <option>Day</option>
    <option>Month</option>
    <option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
    <thead>
    </thead>
    <tbody id="shelulerData">
        <tr>
            <th>Fullname</th>
            <th>Age</th>
            <th>Sport</th>
            <th>Class </th>
            <th>Term</th>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
            <td>Thulasiram.S</td>
            <td>11</td>
            <td>Chess</td>
            <td>1</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
            <td>ST Ram</td>
            <td>11</td>
            <td>Cricket</td>
            <td>1</td>
            <td>Month</td>
        </tr>
        <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
            <td>Ram Kumar.S</td>
            <td>21</td>
            <td>Chess</td>
            <td>2</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
            <td>Dinesh Kumar.S</td>
            <td>30</td>
            <td>Chess</td>
            <td>3</td>
            <td>Week</td>
        </tr>
    </tbody>
</table>

Answer 2

filterData(startDate)
filterData(duetDate)
filterData(templateName)
filterData(status)

您基本上是在执行基于 OR 的过滤器，但您需要的是基于 AND 的过滤器。

与其多次调用 filterData(...)，不如调用一次并在该方法内连接过滤器。

function getSelectedVal() {
    var startDate = $('#option1 option:selected').text();
    var duetDate = $('#option2 option:selected').text();
    var templateName = $('#option3 option:selected').text();
    var status = $('#option4 option:selected').text();

    filterData([startDate, duetDate, templateName, status]);
}


function filterData(data) {
    const filters = data.filter(f => f.trim() !== "");

    if (filters.length !== 0) {
        var rows = $("#shelulerData").find("tr").hide();
        const selectors = filters.map(f => `tr:contains('${f}')`).join('');

        rows.filter(selectors).show();
    }
}

附录

上述解决方案将执行基于 case-sensitive AND 的过滤器。
如果您需要 case-insensitive 搜索，请将 tr 标记文本转换为 upper/lower 大小写并将其与您的过滤器进行比较。即：

function getSelectedVal() {
    var startDate = $('#option1 option:selected').text();
    var duetDate = $('#option2 option:selected').text();
    var templateName = $('#option3 option:selected').text();
    var status = $('#option4 option:selected').text();

    filterData([startDate, duetDate, templateName, status]);
}

function filterData(data) {
    const filters = data.filter(f => f.trim() !== "");

    if (filters.length !== 0) {
        var rows = $("#shelulerData").find("tr").hide();

        rows.each(function () {
            if (filters.every(f => $(this).text().toUpperCase().indexOf(('' + f).toUpperCase()) !== -1)) $(this).show();
        });
    }
}

如何显示所选下拉列表的筛选数据组合？

How to display my filter data combination of selected dropdowns?

html

javascript

search

jquery

filter

附录