带有表格的 JS 下拉过滤器

Question

我发现 html 表的下拉过滤器有 2 个不同的选项，但我需要 4 个选项，所以我升级了它，添加了 2 个更多选项和复制粘贴的 js 代码，用于选项 1 和 2 和为选项 3 和 4 创建了相同的代码，但现在不起作用，问题出在哪里？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#ddlType,#ddlPrice,#ddlAmount,#ddlStar").on("change", function () {
            var type = $('#ddlType').find("option:selected").val();
            var price = $('#ddlPrice').find("option:selected").val();
            var amount = $('#ddlAmount').find("option:selected").val();
            var star = $('#ddlStar').find("option:selected").val();
            SearchData(type, price, amount, star)
        });
    });
    function SearchData(type, price, amount, star) {
        if (type.toUpperCase() == 'ALL' && price.toUpperCase() == 'ALL' && amount.toUpperCase() == 'ALL' && star.toUpperCase() == 'ALL') {
            $('#table11 tbody tr').show();
        } else {
            $('#table11 tbody tr:has(td)').each(function () {
                var rowType = $.trim($(this).find('td:eq(1)').text());
                var rowPrice = $.trim($(this).find('td:eq(3)').text());
                var rowAmount = $.trim($(this).find('td:eq(4)').text());
                var rowStar = $.trim($(this).find('td:eq(5)').text());
                if (type.toUpperCase() != 'ALL' && price.toUpperCase() != 'ALL' && amount.toUpperCase() != 'ALL' 
                && star.toUpperCase() != 'ALL') {
                    if (rowType.toUpperCase() == type.toUpperCase()  && rowPrice == price && rowAmount == amount 
                    && rowStar == star) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '' 
                || $(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '') {
                    if (type != 'all') {
                        if (rowType.toUpperCase() == type.toUpperCase()) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (price != 'all') {
                        if (rowPrice == price) {
                            $(this).show();
                        }
                        else {
                            $(this).hide();
                        }
                    }
                    if (amount != 'all') {
                        if (rowAmount == amount) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (star != 'all') {
                        if (rowStar == star) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                }
 
            });
        }
    }
</script>

<select class="cl_type" id="ddlType">
    <option value="all">Select option </option>
    <option value="Rest">Rest</option>
    <option value="Excursion">Excursion</option>
    <option value="Shoping">Shoping</option>
</select>

<select class="cl_price" id="ddlPrice">
    <option value="all">Select option </option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="3000">3000</option>
</select>

<select class="cl_amount" id="ddlAmount">
  <option value="all">Select option </option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="cl_star" id="ddlStar">
  <option value="all">Select option </option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<table style="width: 100%" id="table11" border="1">
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Price</th>
        <th>Amount of persons</th>
        <th>Type of hotel</th>
    </tr>
    <tr>
        <td>REST</td>
        <td>Description</td>
        <td>500</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
      <td>REST</td>
      <td>Description</td>
      <td>3000</td>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>1000</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>1000</td>
      <td>4</td>
      <td></td>
    
    </tr>
</table>

我js不好，请问哪里错了。在此处找到此代码：code

Answer 1

您应用的逻辑假定您只有一个“全部”和另一个选项。要区分不同的选项，您需要实现不同的逻辑。为此，我创建了一个名为 show 的局部变量，我们有一个翻译如下的逻辑：

如果符合类型、价格、数量和星级标准，我们就会展示它。

匹配标准是通过检查它到目前为止看起来是否良好来计算的（show 仍然是 true）并且标准是 all 或行的对应单元格匹配给定的文本。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#ddlType,#ddlPrice,#ddlAmount,#ddlStar").on("change", function () {
            var type = $('#ddlType').find("option:selected").val();
            var price = $('#ddlPrice').find("option:selected").val();
            var amount = $('#ddlAmount').find("option:selected").val();
            var star = $('#ddlStar').find("option:selected").val();
            SearchData(type, price, amount, star)
        });
    });
    function SearchData(type, price, amount, star) {
        for (let row of document.querySelectorAll('table tr')) {
            let tds = row.querySelectorAll('td');
            if (!tds.length) continue;
            let show = true;
            show = show && ((type === "all") || (tds[0].innerText.toLowerCase() === type.toLowerCase()));
            show = show && ((price === "all") || (tds[2].innerText.toLowerCase() === price.toLowerCase()));
            show = show && ((amount === "all") || (tds[3].innerText.toLowerCase() === amount.toLowerCase()));
            show = show && ((star === "all") || (tds[4].innerText.toLowerCase() === star.toLowerCase()));
            $(row)[show ? "show" : "hide"]();
        }
    }
</script>

<select class="cl_type" id="ddlType">
    <option value="all">Select option </option>
    <option value="Rest">Rest</option>
    <option value="Excursion">Excursion</option>
    <option value="Shoping">Shoping</option>
</select>

<select class="cl_price" id="ddlPrice">
    <option value="all">Select option </option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="3000">3000</option>
</select>

<select class="cl_amount" id="ddlAmount">
  <option value="all">Select option </option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="cl_star" id="ddlStar">
  <option value="all">Select option </option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<table style="width: 100%" id="table11" border="1">
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Price</th>
        <th>Amount of persons</th>
        <th>Type of hotel</th>
    </tr>
    <tr>
        <td>REST</td>
        <td>Description</td>
        <td>500</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
      <td>REST</td>
      <td>Description</td>
      <td>3000</td>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>1000</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>1000</td>
      <td>4</td>
      <td></td>
    
    </tr>
</table>

带有表格的 JS 下拉过滤器

JS dropdown filter with tables

javascript

html

jquery