Div-Anzeige Ausblenden

Question

Hi There _ Ich bin ein Neuling all dies und wirklich mit einem Dropdown-Menü, das ein div beim Laden zeigt aber dann versteckt das div und ersetzt durch ein anderes auf Auswahl aus einem Dropdown. Ich habe stundenlang versucht, das richtig zu machen und habe mir eine Reihe von Möglichkeiten angeschaut. Der nächste, den ich habe, ist eine Antwort auf an earlier question on this. Ich habe mich auf is here festgelegt.

Ich habe es leicht angepasst, da ich nicht "Select ..." möchte.

Skript bleibt gleich, wie auch das CSS. Hier ist die HTML, die ich angepasst habe:

<select id="target"> 
        <option value="content_1">Option 1</option> 
        <option value="content_2">Option 2</option> 
        <option value="content_3">Option 3</option> 
       </select> 

       <div id="content_1" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 1</div> 
       <div id="content_2" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 2</div> 
       <div id="content_3" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 3</div> 

und nur für den Fall hier ist das Skript:

<script> 
    document 
     .getElementById('target') 
     .addEventListener('change', function() { 
      'use strict'; 
      var vis = document.querySelector('.vis'), 
       target = document.getElementById(this.value); 
      if (vis !== null) { 
       vis.className = 'inv'; 
      } 
      if (target !== null) { 
       target.className = 'vis'; 
      } 
     }); 
</script> 

Answer 1

Sie können Ihren Code am Ende des Körpers hinzuzufügen, oder können Sie das window.onload Ereignis verwenden :

window.onload = function() { 
 
    document 
 
    .getElementById('target') 
 
    .addEventListener('change', function() { 
 
    'use strict'; 
 
    var vis = document.querySelector('.vis'), 
 
     target = document.getElementById(this.value); 
 
    if (vis !== null) { 
 
     vis.className = 'inv'; 
 
    } 
 
    if (target !== null) { 
 
     target.className = 'vis'; 
 
    } 
 
    }); 
 
    
 
    // send change event to element to select the first div... 
 
    var event = new Event('change'); 
 
    document.getElementById('target').dispatchEvent(event); 
 
}

.inv { 
 
    display: none; 
 
}

<select id="target"> 
 
    <option value="content_1">Option 1</option> 
 
    <option value="content_2">Option 2</option> 
 
    <option value="content_3">Option 3</option> 
 
</select> 
 

 
<div id="content_1" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 1</div> 
 
<div id="content_2" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 2</div> 
 
<div id="content_3" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 3</div>