Div選択の非表示

Question

こんにちは私はこのすべての初心者で、読み込み時にdivを表示するドロップダウンメニューで本当に苦労しますが、divを非表示にしてドロップダウンから選択したものを別のものに置き換えます。私はこの権利を得るために何時間も費やして、いくつかのオプションを見てきました。私が一番近いのはan earlier question on thisです。私はis hereに定住しました。

「選択...」したくないので少し修正しました。

スクリプトはCSSと同じです。

<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> 

をし、念のためにここにスクリプトです：

<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

あなたは、本体の終わりに、あなたのコードを追加したり、あなたがwindow.onloadイベントを使用することができますここで私は適応してきたHTMLです：

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>