使用以表格为内容的下拉菜单？

Question

如果用户单击任何选项值，我想使用一个过滤的长表。选择“全部”选项后，用户将看到完整列表。使用不同的选项，同一张表将缩小以仅显示该值中的信息。我已经使用每张桌子测试过了，但是我的目标是一张满桌子。

 <div id="roster" class="tabcontent">
    <h3>Study Roster</h3>
    <div class="rostercontent">
    <select>
        <option value="All">All</option>
        <option value="Option1">Option 1</option>
        <option value="Option2">Option 2</option>
    </select>


    <div id="Option1" class="Option1 roster">
        <table id="myTable" class="rosterTable">
            <thead>
            <tr >
                <th onclick="sortTable(0)" style="color: white">Name &#8645;</th>
                <th style="color: white">Email &#8645;</th>
                <th onclick="sortTable(2)" style="color: white">Role &#8645;</th>
                <th onclick="sortTable(3)" style="color: white">Site &#8645;</th>
            </tr>
            </thead>
            <tr>
                <td>Person 1</td>
                <td> <a>Email</a></td>
                <td>Job Title</td>
                <td>Option1</td>
            </tr>
            <tr>
                <td>Person 2</td>
                <td> <a>Email</a></td>
                <td>Job Title</td>
                <td>Option1</td>
            </tr>            
  </table>
    </div>
    <div id="Option2" class="Option2 roster">
        <table id="allTable" class="rosterTable">
            <thead>
            <tr >
                <th onclick="sortTable(0)" style="color: white">Name &#8645;</th>
                <th style="color: white">Email &#8645;</th>
                <th onclick="sortTable(2)" style="color: white">Role &#8645;</th>
                <th onclick="sortTable(3)" style="color: white">Site &#8645;</th>
            <tr>
                <td>Person 3</td>
                <td> <a>Email</a></td>
                <td>Job Title</td>
                <td>Option1</td>
            </tr>
            <tr>
                <td>Person 4</td>
                <td> <a>Email</a></td>
                <td>Job Title</td>
                <td>Option1</td>
            </tr>
        </table>
    </div>

<script>
    $(document).ready(function(){
        $("select").change(function(){
            $(this).find("option:selected").each(function(){
                var optionValue = $(this).attr("value");
                if(optionValue){
                    $(".roster").not("." + optionValue).hide();
                    $("." + optionValue).show();
                } else{
                    $(".roster").hide();
                }
            });
        }).change();
    });
</script>