表过滤，排序，在html中使用jquery/javascript/css进行区分记录

页面中将有6个选项卡，即A，B，C，D，E，F和2个下拉列表。

工作行为为：用户将从 2 个下拉列表中选择一个值。然后根据选择的值，需要对每个表中存在的 html 表应用过滤。`

var options = $("#comboB").html();
$("#comboA").change(function(e) {
    var text = $("#comboA :selected").text();
    alert(text);
    $("#comboB").html(options);
    $('#comboB :not([value^="' + text + '"])').remove();
});
$("#comboB").change(function(e) {
    var text = $("#comboB :selected").text();
    alert(text);
    var allRows = $("tr");
    allRows.hide();
    $("tr:contains('" + text + "')").show();
});

<div class="dd">
<select id="comboA">
<option value="">Select Value</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>    
</select>
<select id="comboB">
<option value="">Select Value</option>
<option value="A">A 1</option>
<option value="A">A 2</option>
<option value="A">A 3</option>
<option value="B">B 1</option>
<option value="B">B 2</option>
<option value="B">B 3</option>
<option value="B">B 4</option>
<option value="C">C 1</option>
<option value="D">D 1</option>
<option value="D">D 2</option>
<option value="E">E 1</option>
<option value="E">E 2</option>
<option value="E">E 3</option>
<option value="E">E 4</option>
<option value="F">F 1</option>
<option value="F">F 2</option>
<option value="F">F 3</option>
<option value="F">F 4</option>
<option value="F">F 5</option>
<option value="F">F 6</option>
</select>
</div>
<div class="tbdata">
<table id="Fdata" border="1">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
    </tr>
    <tr>
        <td class="A">A 2</td>
        <td class="B">B 1</td>
        <td class="C">C 2</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 6</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 2</td>
        <td class="F">F 6</td>
    </tr>   
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 3</td>
        <td class="F">F 6</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 2</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 3</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 4</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 2</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 5</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 4</td>
        <td class="F">F 6</td>
    </tr>   
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 2</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 2</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 2</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 2</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 1</td>
    </tr>
    <tr>
        <td class="A">A 1</td>
        <td class="B">B 1</td>
        <td class="C">C 1</td>
        <td class="D">D 1</td>
        <td class="E">E 1</td>
        <td class="F">F 4</td>
    </tr>
</table>
</div>

链接到我到目前为止尝试过的代码。

现在我不确定如何做以下事情。

1）假设用户从下拉列表中选择了任何值，那么我就可以过滤html表。如果用户选择了 F，则只有 F 列可见。此外，仅应显示不同的值（存在重复值）

2）如果我从第二个下拉列表中选择第一个值，则不会调用更改事件，因为没有进行过滤。如何解决这个问题？

3）我必须为每个选项（A，B，C..）创建选项卡，并在选择下拉值后，如果用户转到A选项卡，则应显示A列。如果选择了 B 选项卡，则应显示 B 列。它应根据下拉列表中选择的值显示值。
我创建了一个带有导航选项卡的 html 页面，但不确定如何将其与此集成。