Change the visibility of a select

Question

Change the visibility of a select

Navigation

#1 by (5 votes)

3

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

Here is the JS code I used to change the visibility of the 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's 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>

javascript html

asked by anonymous 20.11.2017 / 15:17

1 answer

Sorting lists with multiple parameters using lambda expression Indicator in R conditioned to variables with duplicate values

score 5 · Accepted Answer

You should not set onchange 3 times, the way is only the first method ( showCampogol ) will be triggered.

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>