basti1012.bplaced.net

Hallo, ich habe ein Dropdown-Menü und ich möchte je nach Auswahl das selektierte div einblenden und die anderen 2 ausblenden.

Code

                                    
                                <style>
  div{
  height:100px;
  position:relative;
  width:100%;
  font-size:80px;
  border:2px solid black;
}
.off{
  opacity:0;
  transition:1s opacity;
}
.on{
  opacity:1;
  transition:1s opacity;
}
</style>
    <select name="dropdown" id="dropdown">
        <option value="">Auswahl</option>
        <option value="1">div1</option>
        <option value="2">div2</option>
        <option value="3">div3</option>
      <option value="0">Alles ausblenden</option>
       <option value="4">Alles einblenden</option>
        </select>
        <div class="off" id="div1">
            Das ist div1.
        </div>
        <div class="off" id="div1">
            Das ist div2.
        </div>
        <div class="off" id="div3">
            Das ist div3.
        </div>
<script>
  div=document.querySelectorAll('div');
document.getElementById('dropdown').addEventListener('change',function(r){
  var numb=this.value;
  if(numb==0){
        div.forEach(function(e){
          if(e.classList.contains('on')){
              e.classList.remove('on'); 
              e.classList.add('off')
          }
        })
  }else if(numb==4){
        div.forEach(function(e){
          if(e.classList.contains('off')){
              e.classList.remove('off'); 
              e.classList.add('on')
          }
        })
  }else{
        div.forEach(function(e){
          if(e.classList.contains('on')){
              e.classList.remove('on'); 
              e.classList.add('off')
          }
          if(div[numb-1].classList.contains('off')){
              div[numb-1].classList.remove('off');
              div[numb-1].classList.add('on')
          }
     })
  }
})
</script>