basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Hallo, Ich möchte über ein Dropdown das ausgewählte div-Objekt einblenden und die anderen 2 ausblenden. Das Grundgerüst habe ich schon, nur weiß ich nicht, wie ich den Rest machen soll.

    Code

                                        
                                    <body translate="no" >
      <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>
    </body>