In the HTML page, there will be a total of 6 tabs labeled A, B, C, D, E, and F along with 2 dropdowns.
The expected behavior is as follows: The user will choose a value from the 2 dropdown menus. Based on the selected value, filtering should be applied to the HTML table in each tab.
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();
});
| A | B | C | D | E | F |
|---|---|---|---|---|---|
| A 2 | B 1 | C 2 | D 1 | E 1 | F 1 |
Here are a few challenges that need addressing:
1) When a value is selected from the dropdown, only columns corresponding to that value (e.g., selecting "F" shows only F columns) should be visible while displaying distinct values.
2) The change event is not triggered when the first value from the second dropdown is selected. How can this issue be resolved?
3) There is a requirement to create tabs for each option (A, B, C, etc.) and display columns based on the selected dropdown value. For instance, if "A" is chosen in the dropdown and the user switches to the "A" tab, only the A column should be displayed. Integrating navigation tabs with this functionality is necessary.