ginette ginette - 1 year ago 95
HTML Question

show/hide select options when td class is multiple

When I choose an option in a select, some columns are displayed, some are hidden. Some columns have several class.

For example:


"object 7" is in "category 1" and "category 3".

"object 7" is displayed in "category 3" but not in "category 1".


I would like to display it also 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="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>

<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>





Could you tell me what's wrong in my code ?

Answer Source

I just made a little change to your script. Hide all first and then show each class..

    function categories() {
        var sections = document.getElementById("sections").value;

        // hide all first and then show
          $('.cat1, .cat2, .cat3').each(function() {
            this.style.display = "none";
          });            



        if (sections == "cat1") {
          $('.cat1').each(function() {
            this.style.display = "table-cell";
          });
        } 
        if (sections == "cat2") {
          $('.cat2').each(function() {
            this.style.display = "table-cell";
          });
        } 
        if (sections == "cat3") {
          $('.cat3').each(function() {
            this.style.display = "table-cell";
          });
        }
        if (sections == "tous") {
          $('.cat1, .cat2, .cat3').each(function() {
            this.style.display = "table-cell";
          });
        }


      }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download