Question

方案是，有一个表格，其中包含下拉选择框，其中包含＃t;＆＃39;。并且，有一个下拉选择框，当选择过滤表格行时，当表格的选择框中的值匹配时。

此处当selectFilter值更改时，它会检查此值是否与已选择的＆＃39;匹配。表格中的价值。这里隐藏了一些行，因此我们需要过滤仅可见的行。这是小提琴链接：https://jsfiddle.net/manzer/8q7owxj5/

     <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
        </head>
        <body>
        <select id="selectFilter">
    <option>Select...</option>
    <option value="cat">Cats</option>
    <option value="dog">Dogs</option>
    <option value="birds">Birds</option>
</select>
<br>
<br>

<table id="animals">
<tbody>
    <tr >
        <td>
        <select>
        <option value="dog">Dog<</option>
        <option value="cat" selected>Cat</option>
        <option value="birds">Birds<</option>
        </select>
        </td>
    </tr>
      <tr style="display:none;">
        <td>
        <select>
        <option value="dog">Dog<</option>
        <option value="cat" selected>Cat</option>
        <option value="birds">Birds<</option>
        </select>
        </td>
    </tr>
    <tr >
          <td>
        <select>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="birds" selected>Birds</option>
        </select>
        </td>
    </tr>

       <tr style="display:none;">
        <td>
        <select>
        <option value="dog">Dog<</option>
        <option value="cat" selected>Cat</option>
        <option value="birds">Birds<</option>
        </select>
        </td>
    </tr>
    <tr>
           <td>
        <select>
        <option value="dog">Dog</option>
        <option value="cat" selected>Cat</option>
        <option value="birds">Birds</option>
        </select>
        </td>
    </tr>

          <tr style="display:none;">
        <td>
        <select>
        <option value="dog">Dog<</option>
        <option value="cat" selected>Cat</option>
        <option value="birds">Birds<</option>
        </select>
        </td>
    </tr>

    <tr>
    <td>
        <select>
        <option value="dog" selected>Dog</option>
        <option value="cat">Cat</option>
        <option value="birds">Birds</option>
        </select>
        </td>
    </tr>
    </tbody>
</table>
<br>

        <script>
               //here when selectFilter value is changed, it checks 
            //this value matches with the already 'selected' value in table.
            //here some rows are hidden, so we need to filter the rows that is //only visible .
           //we need to filter visible rows when value matches from dropdown
           $('#selectFilter').change(function() {
            alert("hi")

            });

        </script>
        </body>
        </html>

Answer 1

这是工作代码。但是，我必须删除/编辑丢失/额外的html（HTML中的tr＆gt;标记

    $(document).ready(function () {
        $('#selectFilter').change(function () {
            var selectedVal = $("#selectFilter option:selected").val();
            alert(selectedVal);
            $('#animals tbody tr:visible').each(function () {
                var val = $(this).find('select option:selected').text();
                if (selectedVal.toLowerCase() != val.toLowerCase()) {
                    $(this).hide();

                }
                else {
                    $(this).show();
                }

            });


        });
    });

如何使用JQuery或Javascript过滤表行

1 个答案: