Estoy tratando de permitir que el uso elija una opción y, por la opción que eligieron, debería aparecer una división. Esto funciona hasta ahora, pero cada vez que el usuario selecciona otra opción, el antiguo div no desaparece. Estoy empezando a usar JavaScript, pero no sé cómo hacer que esto suceda. Este es mi código:

function airplane() {
  var vliegtuig = document.getElementById('vliegtuig').value;
  if (vliegtuig == 1) {
    document.getElementById('vliegtuig_1').style.display = 'block';
  } else if (vliegtuig == 2) {
    document.getElementById('vliegtuig_2').style.display = 'block';
  } else if (vliegtuig == 3) {
    document.getElementById('vliegtuig_3').style.display = 'block';
  } else if (vliegtuig == 4) {
    document.getElementById('vliegtuig_4').style.display = 'block';
  } else if (vliegtuig == 5) {
    document.getElementById('vliegtuig_5').style.display = 'block';
  } else if (vliegtuig == 6) {
    document.getElementById('vliegtuig_6').style.display = 'block';
  } else if (vliegtuig == 7) {
    document.getElementById('vliegtuig_7').style.display = 'block';
  } else if (vliegtuig == 8) {
    document.getElementById('vliegtuig_8').style.display = 'block';
  } else {
    document.getElementById('vliegtuig_id').innerHTML = 'Geen waarde';
  }
}
.hide {
  display: none;
}
<select class="div-toggle" data-target=".my-info-1" name="VliegtuigID" id="vliegtuig" onchange="return airplane()">
            <option value="1" data-show="1"> Airbus-A319-100(OO-SSP)</option>
            <option value="2" data-show="2"> Airbus-A330-300(OO-SSG)</option>
            <option value="3" data-show="3"> AVRO-RJ85(OO-DWE )</option>
            <option value="4" data-show="4"> AVRO-RJ85(OO-DWF)</option>
            <option value="5" data-show="5"> AVRO-RJ84(OO-DWG)</option>
            <option value="6" data-show="6"> Boeing-737-300(OO-VEK)</option>
            <option value="7" data-show="7"> Boeing-737-300(OO-VEL)</option>
            <option value="8" data-show="8"> Boeing-737-400(OO-VEM)</option>
        </select>

<div class="hide" id="vliegtuig_1">1</div>
<div class="hide" id="vliegtuig_2">2</div>
<div class="hide" id="vliegtuig_3">3</div>
<div class="hide" id="vliegtuig_4">4</div>
<div class="hide" id="vliegtuig_5">5</div>
<div class="hide" id="vliegtuig_6">6</div>
<div class="hide" id="vliegtuig_7">7</div>
<div class="hide" id="vliegtuig_8">8</div>
0
Ramon 31 oct. 2017 a las 20:26

5 respuestas

La mejor respuesta

Esto es lo que sugeriría.

function airplane() {
  var allElements = document.getElementsByClassName('vliegtuig');

  for (var i = 0; i < allElements.length; i++) {
    //put the hide class back on the elements that may have had it removed
    allElements[i].classList.add('hide');
  }

  var vliegtuig = document.getElementById('vliegtuig').value;
  
  if (vliegtuig > 0 && vliegtuig < 9) {
    //find the one element that should be shown, and remove the hide class
    document.getElementById('vliegtuig_'+ vliegtuig.toString()).classList.remove('hide');
  } else {
    document.getElementById('vliegtuig_id').innerHTML = 'Geen waarde';
  }
}
.hide {
  display: none;
}
<select class="div-toggle" data-target=".my-info-1" name="VliegtuigID" id="vliegtuig" onchange="return airplane()">
            <option value="1" data-show="1"> Airbus-A319-100(OO-SSP)</option>
            <option value="2" data-show="2"> Airbus-A330-300(OO-SSG)</option>
            <option value="3" data-show="3"> AVRO-RJ85(OO-DWE )</option>
            <option value="4" data-show="4"> AVRO-RJ85(OO-DWF)</option>
            <option value="5" data-show="5"> AVRO-RJ84(OO-DWG)</option>
            <option value="6" data-show="6"> Boeing-737-300(OO-VEK)</option>
            <option value="7" data-show="7"> Boeing-737-300(OO-VEL)</option>
            <option value="8" data-show="8"> Boeing-737-400(OO-VEM)</option>
        </select>

<div class="hide vliegtuig" id="vliegtuig_1">1</div>
<div class="hide vliegtuig" id="vliegtuig_2">2</div>
<div class="hide vliegtuig" id="vliegtuig_3">3</div>
<div class="hide vliegtuig" id="vliegtuig_4">4</div>
<div class="hide vliegtuig" id="vliegtuig_5">5</div>
<div class="hide vliegtuig" id="vliegtuig_6">6</div>
<div class="hide vliegtuig" id="vliegtuig_7">7</div>
<div class="hide vliegtuig" id="vliegtuig_8">8</div>
0
Taplar 31 oct. 2017 a las 17:45

Debes saber que si muestras uno de tus div, no ocultará los otros.

Para hacer eso, debe ocultar el que se muestra. Podrías hacer algo así:

let elementShown;
function airplane() {
    if (elementShown)
         elementShown.style.display = "none"; // That will hide the last element shown

    var vliegtuig = document.getElementById('vliegtuig').value;
    if (vliegtuig == 1) {
        elementShown = document.getElementById('vliegtuig_1')
    }
    else if (vliegtuig == 2 ){
        elementShown = document.getElementById('vliegtuig_2'}
    }
    //and so on ....

    elementShown.style.display = 'block';
}

Lo escribí con su propio algoritmo, pero para ir más lejos, escribiría un avión como este:

let currentElement; // Variable containing the element visible
function airplane () {
   if (currentElement)
         currentElement.style.display = "none"; // That will hide the last 
   var vliegtuig = document.getElementById('vliegtuig').value;
   elementShown = document.getElementById('vliegtuig_' + vliegtuig);
   elementShown.style.display = 'block';
}
0
Yoiki 31 oct. 2017 a las 17:44

Normalmente, oculta y muestra elementos agregando y luego eliminando la clase 'ocultar' u 'oculta'.

document.getElementById('vliegtuig_8').className = ""
document.getElementById('vliegtuig_8').className = "hide"

Así que al comienzo de su función simplemente configure todos los elementos para "ocultar" y luego muestre 1 de ellos.

<div class="onlyOne hide" id="vliegtuig_1">1</div>
<div class="onlyOne hide" id="vliegtuig_2">2</div>
<div class="onlyOne hide" id="vliegtuig_3">3</div>
<div class="onlyOne hide" id="vliegtuig_4">4</div>
<div class="onlyOne hide" id="vliegtuig_5">5</div>
<div class="onlyOne hide" id="vliegtuig_6">6</div>
<div class="onlyOne hide" id="vliegtuig_7">7</div>
<div class="onlyOne hide" id="vliegtuig_8">8</div>

<script>
  var all  = document.getElementsByClassName('onlyOne')
  for( item of all){ item.className = 'onlyOne hide'; }
</script>

JQuery tiene .addClass () y .removeClass () que facilitan el manejo de elementos que tienen más de una clase. pero si solo tiene 1 nombre de clase, esto no es necesario.

0
Nick Timmer 31 oct. 2017 a las 17:41

No necesita todas esas comparaciones cuando simplemente puede concatenar su selector juntos. Su JavaScript se puede simplificar enormemente de esta manera, y esto logra su objetivo de ocultar los elementos actualmente visibles al mostrar los nuevos.

var vliegtuig = document.getElementById('vliegtuig');

vliegtuig.addEventListener("change", function() {
  // select and hide the currently visible element
  var showing = document.querySelectorAll(".vliegtuig.show")[0];
  if (showing) {
    showing.classList.remove("show");
  }

  // now show the selected element
  var value = vliegtuig.value;
  document.getElementById("vliegtuig_" + value).classList.add("show");
});
.vliegtuig {
  display: none;
}

.vliegtuig.show {
  display: block;
}
<select id="vliegtuig">
  <option>Make a selection</option>
  <option value="1">Airbus-A319-100(OO-SSP)</option>
  <option value="2">Airbus-A330-300(OO-SSG)</option>
  <option value="3">AVRO-RJ85(OO-DWE )</option>
  <option value="4">AVRO-RJ85(OO-DWF)</option>
  <option value="5">AVRO-RJ84(OO-DWG)</option>
  <option value="6">Boeing-737-300(OO-VEK)</option>
  <option value="7">Boeing-737-300(OO-VEL)</option>
  <option value="8">Boeing-737-400(OO-VEM)</option>
</select>

<div class="vliegtuig" id="vliegtuig_1">1</div>
<div class="vliegtuig" id="vliegtuig_2">2</div>
<div class="vliegtuig" id="vliegtuig_3">3</div>
<div class="vliegtuig" id="vliegtuig_4">4</div>
<div class="vliegtuig" id="vliegtuig_5">5</div>
<div class="vliegtuig" id="vliegtuig_6">6</div>
<div class="vliegtuig" id="vliegtuig_7">7</div>
<div class="vliegtuig" id="vliegtuig_8">8</div>
1
Jon Uleis 31 oct. 2017 a las 17:40

Puedes probar el siguiente código que escribí basado en tu estructura DOM:

function airplane() {

  var vliegtuig = document.getElementById('vliegtuig').value;
  var getDiv = document.getElementsByClassName('hide');

  for(var i=0; i<getDiv.length;i++){
    getDiv[i].style.display = 'none';
  }

  document.getElementById('vliegtuig_'+vliegtuig).style.display = 'block';

}
0
Hanif 31 oct. 2017 a las 17:55