Change the visibility of a select

Question

I have this form, where depending on what the person chooses will appear another select for her to select, but this way I did, it is not appearing. Does anyone know if this doesn’t work to select? because I have one to change the visibility of an input and it works normally. Or if you cannot use 3 functions in one element only?

Here’s the JS code I used to change the visibility of select:

    function mostraCampogol(obj) {
      var select = document.getElementById('periodo');
      var txt = document.getElementById("turmagol");
      txt.style.visibility = (select.value == 'Golfinho') 
          ? "visible"
          : "hidden";  
    }
    function mostraCampopleno(obj) {
      var select = document.getElementById('periodo');
      var txt = document.getElementById("turmapleno");
      txt.style.visibility = (select.value == 'Pleno') 
          ? "visible"
          : "hidden";  
    }
    function mostraCamposenior(obj) {
      var select = document.getElementById('periodo');
      var txt = document.getElementById("turmasenior");
      txt.style.visibility = (select.value == 'Sênior') 
          ? "visible"
          : "hidden";  
    }
</script>

Here is the part of the form itself:

<div class="form-group">                
          <label> Categoria <br />
            <select class="form-group" name="periodo" id="periodo" onchange="mostraCampogol(this.value);" onchange="mostraCampopleno(this.value);" onchange="mostraCamposenior(this.value);">
              <option></option>
              <option value="Golfinho">Golfinho/Júnior</option>
              <option value="Pleno">Pleno</option>
              <option value="Sênior">Sênior</option>
            </select>
          </label>
          <select class="form-group" name="turmagol" id="turmagol" style="visibility: hidden;">
              <option value="Turma 1">Turma 1</option>
              <option value="Turma 2">Turma 2</option>
              <option value="Turma 3">Turma 3</option>
            </select>
          </label>
          <select class="form-group" name="turmapleno" id="turmapleno" style="visibility: hidden;">
              <option value="Turma 4">Turma 4</option>
              <option value="Turma 5">Turma 5</option>
              <option value="Turma 6">Turma 6</option>
            </select>
          </label>
          <select class="form-group" name="turmasenior" id="turmasenior" style="visibility: hidden;">
              <option value="Jovem">Jovem</option>
              <option value="Jovem">Jovem</option>
              <option value="Jovem">Jovem</option>
            </select>
          </label>
        </div>

Answer 1

You must not define onchange 3 times, the way it is only the first method (showCampogol) will be fired.

You must include the 3 function calls in a single onchange:

<select class="form-group" name="periodo" id="periodo" onchange="mostraCampogol(this.value);mostraCampopleno(this.value);mostraCamposenior(this.value);">

See the example below working:

function mostraCampogol(obj) {
  var select = document.getElementById('periodo');
  var txt = document.getElementById("turmagol");
  txt.style.visibility = (select.value == 'Golfinho') 
      ? "visible"
      : "hidden";  
}

function mostraCampopleno(obj) {
  var select = document.getElementById('periodo');
  var txt = document.getElementById("turmapleno");
  txt.style.visibility = (select.value == 'Pleno') 
      ? "visible"
      : "hidden";  
}

function mostraCamposenior(obj) {
  var select = document.getElementById('periodo');
  var txt = document.getElementById("turmasenior");
  txt.style.visibility = (select.value == 'Sênior') 
      ? "visible"
      : "hidden";  
}

<div class="form-group">                
  <label> Categoria <br />
    <select class="form-group" name="periodo" id="periodo" onchange="mostraCampogol(this.value);mostraCampopleno(this.value);mostraCamposenior(this.value);">
      <option></option>
      <option value="Golfinho">Golfinho/Júnior</option>
      <option value="Pleno">Pleno</option>
      <option value="Sênior">Sênior</option>
    </select>
  </label>
  <label>
  <select class="form-group" name="turmagol" id="turmagol" style="visibility: hidden;">
      <option value="Turma 1">Turma 1</option>
      <option value="Turma 2">Turma 2</option>
      <option value="Turma 3">Turma 3</option>
    </select>
  </label>
  <label>
  <select class="form-group" name="turmapleno" id="turmapleno" style="visibility: hidden;">
      <option value="Turma 4">Turma 4</option>
      <option value="Turma 5">Turma 5</option>
      <option value="Turma 6">Turma 6</option>
    </select>
  </label>
  <label>
  <select class="form-group" name="turmasenior" id="turmasenior" style="visibility: hidden;">
      <option value="Jovem">Jovem</option>
      <option value="Jovem">Jovem</option>
      <option value="Jovem">Jovem</option>
    </select>
  </label>
</div>