Show/hide columns depending to choice in drop-down list

Question

I searched how to show/hide columns depending to choice in drop-down list. I wrote this:

function categoriesCriteres() {
  var sections = document.getElementById("sections").value;
  if (sections == "generaux") {
    document.getElementByClassName("generaux").style.display = "block";
  } else {
    document.getElementByClassName("generaux").style.display = "none";
  }
}

<select class="form-control" id="sections" name="sections" onchange="categoriesCriteres()">
    <option value="choisir" selected disabled>Choisir</option>
    <option id="generaux" value="generaux">Apports généraux</option>
    <option id="mineraux" value="mineraux">Minéraux</option>
    <option id="vitamines" value="vitamines">Vitamines</option>
    <option id="autres" value="autres">Autres</option>
   </select>
<div>
  <table class="table table-striped" id="nutrition">
    <thead>
      <tr>
        <th>Aliments</th>
        <th>Poids</th>
        <th class="generaux">Energie kJ</th>
        <th class="generaux">Energie kcal</th>
    </thead>
    <tbody class="text-primary" id="myrecap">
      <tr>
        <td>blé</td>
        <td><strong>150gr</strong></td>
        <td class="generaux">energie_kJ</td>
        <td class="generaux">energie_kcal</td>
      </tr>
      <tr>
        <td>Total</td>
        <td><strong>150 gr</strong></td>
      </tr>
    </tbody>
  </table>
</div>

But nothing happen when I change value on my dropdown-list... I don't understand what's wrong.... Maybe someone can help me ?

Actually, something does happen: you get an error. I suggest you take a look at that. The error is that there's no such function as `document.getElementByClassName()`. — Lennholm, May 08 '17 at 11:07
http://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser — Itsik Mauyhas, May 08 '17 at 11:10
there is no `document.getElementByClassName()` its `document.getElementsByClassName()` note 's' — Khaleel, May 08 '17 at 11:12
Yes i see this error but i don't know how to correct this. i tried getElementsByClassName instead document.getElementByClassName and now i have this error : getElementsByClassName is not defined". I'm novice in javascript... — ginette, May 08 '17 at 11:28
Khaleel, i modified to document.getElementsByClassName() but i still have an error : Cannot set property 'display' of undefined" — ginette, May 08 '17 at 11:31

score 0 · Answer 1 · answered May 08 '17 at 11:13

It is getElementsByClassName() and not getElementByClassName() and it returns and array. You'll have to access each element of the array using [] bracket notation.

function categoriesCriteres () { 
var sections = document.getElementById("sections").value;
if (sections == "generaux") {
var g = document.getElementsByClassName("generaux");
for(var i=0; i<g.length; i++){
  g[i].style.display="block";
} 
} else {
var g = document.getElementsByClassName("generaux");
for(var i=0; i<g.length; i++){
  g[i].style.display="none";
}  
} 
}

<select class="form-control" id="sections" name="sections" onchange="categoriesCriteres()">
        <option value="choisir" selected disabled>Choisir</option>
        <option id="generaux" value="generaux">Apports généraux</option>
        <option id="mineraux" value="mineraux">Minéraux</option>
        <option id="vitamines" value="vitamines">Vitamines</option>
        <option id="autres" value="autres">Autres</option>
     </select>

<div>
<table class="table table-striped" id="nutrition">
  <thead>
    <tr>
     <th>Aliments</th>
    <th>Poids</th>
    <th class="generaux">Energie kJ</th>
   <th class="generaux">Energie kcal</th>
      </thead>
   <tbody class="text-primary" id="myrecap">

      <tr>
    <td>blé</td><td><strong>150gr</strong></td>
         <td class="generaux">energie_kJ</td>
        <td class="generaux">energie_kcal</td>
    </tr>

     <tr><td>Total</td><td><strong>150 gr</strong></td></tr>
     </tbody>
  </table>
</div>

yes i'm sorry i thought i was answering to the post below...with jquery... — ginette, May 08 '17 at 12:01

Geethu Jose · Accepted Answer · 2017-05-08T12:25:11.567

Use jQuery.It is a JavaScript Library.It greatly simplifies JavaScript programming.

Working of the code

var sections = document.getElementById("sections").value;

This returns the selected drop down option value. Then you need to compare if the selected option is generaux.

If true, we set the display property of all class generaux elements as table-cell.

If false, ie; the user selected the other option. Then we set the display property of all class generaux elements as none.

$('.generaux') is similar to document.getElementsByClassName('generaux').

$('.generaux').each(function() {
          this.style.display = "table-cell"
});

Works as the alternative of

var generauxElements = document.getElementsByClassName("generaux");
for(var i=0,length=generauxElements.length; i<length; i++){
  generauxElements[i].style.display="table-cell";
}

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

if (sections == "generaux") {
    $('.generaux').each(function() {
      this.style.display = "table-cell"
    });
  } else {
    $('.generaux').each(function() {
      this.style.display = "none"
    });
  }

Using display: block; shatters the table alignment. So better use display: table-cell;

function categoriesCriteres() {
  var sections = document.getElementById("sections").value;
  if (sections == "generaux") {
    $('.generaux').each(function() {
      this.style.display = "table-cell"
    });
  } else {
    $('.generaux').each(function() {
      this.style.display = "none"
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="sections" name="sections" onchange="categoriesCriteres()">
            <option value="choisir" selected disabled>Choisir</option>
            <option id="generaux" value="generaux">Apports généraux</option>
            <option id="mineraux" value="mineraux">Minéraux</option>
            <option id="vitamines" value="vitamines">Vitamines</option>
            <option id="autres" value="autres">Autres</option>
         </select>

<div>
  <table class="table table-striped" id="nutrition">
    <thead>
      <tr>
        <th>Aliments</th>
        <th>Poids</th>
        <th class="generaux">Energie kJ</th>
        <th class="generaux">Energie kcal</th>
    </thead>
    <tbody class="text-primary" id="myrecap">

      <tr>
        <td>blé</td>
        <td><strong>150gr</strong></td>
        <td class="generaux">energie_kJ</td>
        <td class="generaux">energie_kcal</td>
      </tr>

      <tr>
        <td>Total</td>
        <td><strong>150 gr</strong></td>
      </tr>
    </tbody>
  </table>
</div>

You should add that you are using jQuery, we dont know if he was not using it. Nevertheless, it should work ;) — Diego N., May 08 '17 at 11:38
Thanks a lot @Geethu Jose it works ! you are using Jquery it's completely new for me... So now i have to use this code for each option of my dropdown-list i suppose ? — ginette, May 08 '17 at 12:02
jQuery is a JavaScript Library.It greatly simplifies JavaScript programming. — Geethu Jose, May 08 '17 at 12:11
@Geethu Jose : thank you so much for your very explicite answer ! It's my first post on stackoverflow and i don't find where to put the subject as resolved... — ginette, May 08 '17 at 13:36

Show/hide columns depending to choice in drop-down list

2 Answers2