Upon selecting an option from a dropdown, certain columns are shown while others are hidden. Some columns have multiple classes assigned to them.
For instance:
"object 7" belongs to "category 1" and "category 3".
"object 7" is visible in "category 3" but not in "category 1".
I wish to also display it in category 1.
function categories() {
var sections = document.getElementById("sections").value;
if (sections == "cat1") {
$('.cat1').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat1').each(function() {
this.style.display = "none"
});
}
if (sections == "cat2") {
$('.cat2').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat2').each(function() {
this.style.display = "none"
});
}
if (sections == "cat3") {
$('.cat3').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat3').each(function() {
this.style.display = "none"
});
}
if (sections == "tous") {
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "table-cell"
});
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
<option value="choose" selected disabled>Choose</option>
<option id="cat1" value="cat1">category 1</option>
<option id="cat2" value="cat2">category 2</option>
<option id="cat3" value="cat3">category 3</option>
<option id="all" value="all">All</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">item 1</th>
<th class="cat1">item 2</th>
<th class="cat2">item 3</th>
<th class="cat2">item 4</th>
<th class="cat3">item 5</th>
<th class="cat3">item 6</th>
<th class="cat1 cat3">item 7</th>
<th class="cat2 cat3">item 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">item 1</td>
<td class="cat1">item 2</td>
<td class="cat2">item 3</td>
<td class="cat2">item 4</td>
<td class="cat3">item 5</td>
<td class="cat3">item 6</td>
<td class="cat1 cat3">item 7</td>
<td class="cat2 cat3">item 8</td>
</tr>
</tbody>
</table>Please point out any issues you see in my code.