Javascript 通过下拉菜单隐藏表行

我有2个下拉菜单（用户名和性别），我有3列的表格（用户名、姓名和性别）。
我想根据下拉值筛选表。我该怎么办

代码如下：

<select class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>
</div>

<table class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>
<!-- // Table END -->

用户名
用户1
用户2
用户3
性别
M
F
用户名
名称
性别
用户1
简
F
用户2
约翰
M
用户3
杰克
M

我创建了这个解决方案

html

<select id="username" class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select id="gender" class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>

<table class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>

---

我用jQuery编写了一个简单的脚本（必须包含jQuery库）

HTML:

<select name="username" class="form-control selectpicker">
    <option value="">Username</option>
    <option value="">user1</option>
    <option value="">user2</option>
    <option value="">user3</option>
</select>

<select name="gender" class="form-control selectpicker">
    <option value="">Gender</option>
    <option value="">M</option>
    <option value="">F</option>

</select>
</div>

<table id="tbl" class="dynamicTable tableTools table table-striped table-primary">
    <!-- Table heading -->
        <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>

    <tbody>
        <tr>
            <td>user1</td>
            <td>Jane</td>
            <td>F</td>
        </tr>
        <tr>
            <td>user2</td>
            <td>John</td>
            <td>M</td>
        </tr>
        <tr>
            <td>user3</td>
            <td>Jack</td>
            <td>M</td>
        </tr>

    </tbody>
    <!-- // Table body END -->
</table>
<!-- // Table END -->

$(document).ready(function() {
    function calculate() {
        $('#tbl tbody tr').show();
        var sel_username = $('select[name="username"] option:selected').text();
        var sel_gender = $('select[name="gender"] option:selected').text();

        if(sel_username == 'Username' && sel_gender == 'Gender') {
            return;
        }

        $('#tbl tbody tr').each(function() {
            var col_username = $(this).find('td').first();
            var col_gender = $(this).find('td').last();

            if(col_username.text() !== sel_username && sel_username !== 'Username') {
                $(this).hide();
            }

            if(col_gender.text() !== sel_gender && sel_gender !== 'Gender') {
                if($(this).is(':visible')) {
                    $(this).hide();
                }
            }
        });
    }

    $('select[name="username"]').change(function() {
        calculate();
    });

    $('select[name="gender"]').change(function() {
        calculate();
    });
});

---

在询问之前，首先要做的是自己尝试一下……先生，您对此有任何指导吗？简单的一个汉克先生，我已经尝试了完全一样的这篇文章，但它不起作用，我不知道为什么，但可能我错过了什么？？链接（“fiddle”）上的示例就是我需要的。我只是不知道我的电脑出了什么问题，对不起，我是新来的。这和你的电脑没有关系。你可能错过了什么。您包括jquery库了吗？我必须包括jquery库吗？我只需要那个脚本，先生，我把它放在一个文件（html和js）中，我把你的js代码插入其中，是不是错了？是的，有一个错误“uncaughtreferenceerror:$未定义”。我应该如何解决这个问题，先生？您必须将jquery库添加到代码的头中。有两种方法。1） 从谷歌直接链接

或从

http://jquery.com/download/

并添加到您的项目中。希望有帮助：）谢谢，先生，这是我需要的，但我不知道它在我的电脑里不起作用，也许我遗漏了什么？？你包括jquery库了吗？您可以在这里找到它：您注意到表中的id和select元素中的名称了吗？您必须在脚本中的

之前添加

。或者在

中。我必须包括jquery库吗？？我完全按照你的密码来做，先生

$(document).ready(function() {
    function calculate() {
        $('#tbl tbody tr').show();
        var sel_username = $('select[name="username"] option:selected').text();
        var sel_gender = $('select[name="gender"] option:selected').text();

        if(sel_username == 'Username' && sel_gender == 'Gender') {
            return;
        }

        $('#tbl tbody tr').each(function() {
            var col_username = $(this).find('td').first();
            var col_gender = $(this).find('td').last();

            if(col_username.text() !== sel_username && sel_username !== 'Username') {
                $(this).hide();
            }

            if(col_gender.text() !== sel_gender && sel_gender !== 'Gender') {
                if($(this).is(':visible')) {
                    $(this).hide();
                }
            }
        });
    }

    $('select[name="username"]').change(function() {
        calculate();
    });

    $('select[name="gender"]').change(function() {
        calculate();
    });
});