afficher/masquer option d'un select

ginettebaldoche
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

<script type="text/javascript">
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>

<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">contenu objet 1</td>
      <td class="cat1 cat 2">contenu objet 2</td>
      <td class="cat2">contenu objet 3</td>
      <td class="cat2">contenu objet 4</td>
      <td class="cat3">contenu objet 5</td>
      <td class="cat3">contenu objet 6</td>
      <td class="cat1 cat3">contenu objet 7</td>
      <td class="cat2 cat3">contenu objet 8</td>
      </tr>
    </tbody>
  </table>

Ce que je veux

A partir des options d'un select, je cherche à afficher/masquer des colonnes d'un tableau. Certaines colonnes peuvent être affichée sur plusieurs options du select, donc j'ai mis plusieurs class dans certaines td.
Par exemple : l'objet 7 fais partie de la categorie 1 et la categorie 3

Ce que j'obtiens

l'objet 7 s'affiche bien dans la catégorie 3 mais pas dans la catégorie 1
J'aimerais qu'il s'affiche aussi dans la catégorie 1

3 réponses

G1.3

Salut

Il y a un probleme dans ton JS au niveua de la logique.
Si je sélectionne cat1, cat2 et cat3 ne sont pas sélectionnés donc tu masques cat2 et cat3. Mais un cat1 peut être un cat2 ou un cat3 aussi.

De plus, c'est pas très évolutif, tu peux faire un truc du genre:

$('td:not(.'+section+'), th:not(.'+section+')').hide();
$('.'+section).show();

(Pas testé mais ça devrait pouvoir remplacer la quasi-totalité de ta fonction.

Dis moi si ça colle avec ta demande ;)

ginettebaldoche
Auteur

Bonjour et merci pour ta réponse,
en fait certaines colonnes doivent rester affichées tout le temps (je ne les ai pas mise dans le code dessus...), du coup si j'affiche ou masque en utilisant th et td dans la fonction ces colonnes là seront aussi masquées...

TokaLazy 
function categories() {
  // Je te conseil de mettre une class spécifique pour cibler ton tableau
  var table = $('.table.table-striped')

  // Valeur de l'option selectionné
  var sections = $('#sections').val()

  // Vu que la valeur a le même nom que la class à modifier, on ajoute un point pour l'utiliser comme élément jQuery
  var elements = '.' + sections

  // On cache toutes les cellules du tableau
  $('td, th', table).hide()

  // Si le choix est "tous", on affiche tout ^_^
  if (sections === 'tous') {
    return $('td, th', table).show()
  }

  // Sur chaque élément qui correspondent à l'option choisi, on met un display table-cell
  $(elements).each(function() {
    $(this).show()
  })
}

Je te conseil aussi d'enlever l'écouteur d'évènement sur ton élément du DOM et de faire directement dans le JS

document.getElementById('sections').addEventListener('change', function() {
    // Ton code
})