divs Ein- und ausblenden

Hallo, ich habe ein Dropdown-Menü und ich möchte je nach Auswahl das selektierte div einblenden und die anderen 2 ausblenden.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete 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>