CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ginette
ginette

Reputation: 55

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 ?

Upvotes: 2

Views: 99

Answers (3)

T.Shah
T.Shah

Reputation: 2768

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";
          });
        }


      }

Upvotes: 2

Mohammed Acharki
Mohammed Acharki

Reputation: 244

First it will be better to attach the change event using jQuery.

$('#sections').on('change', function(){
    //Your event core here
});

And remove the inline onclick from you select :

<select class="form-control" id="sections" name="sections">

You can hide all the td and th after every change then show the elements by classname like :

$('.'+class_name).show();

Hope this will help you.

$('#sections').on('change', function(){
   var class_name = $(this).val();
   
   $('td,th').hide();
   $('.'+class_name).show();
})
<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">
  <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>

Upvotes: 4

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

You can simpify your code in this following approach:

var sections = document.getElementById("sections").value;
$('table tr td').each(function(){
   $(this).css('display', $(this).hasClass(sections) ? 'block' : 'none');
});

You have to change the display property based on condition.

$(this).hasClass(sections)

hasClass method determines whether any of the matched elements are assigned the given class.

function categories() {
  var sections = document.getElementById("sections").value;
  $('table tr td, table tr th').each(function(){
    $(this).css('display', $(this).hasClass(sections) ? 'inline-block' : 'none');
  });
}
<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>

Upvotes: 4

Related Questions