根據下拉菜單中的選擇更改div的內容，其中第一個選項在JavaScript中可見

Question

我正在設置一個選擇按鈕來更改其下方的內容。 我已經找到了如何更改下面的內容，但是在開始任何選擇之前，我需要顯示其中一個選項。

[默認選擇1]

顯示：無

 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"; } }); 

 .inv { display: none; } 

 <select id="target"> <option value="">Select...</option> <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">Content 1</div> <div id="content_2" class="inv">Content 2</div> <div id="content_3" class="inv">Content 3</div> 

Answer 1

進行預選擇的選項，然后添加vis並從中刪除inv類

 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"; } }); 

 .inv { display: none; } 

 <select id="target"> <option value="">Select...</option> <option value="content_1 vis" selected="selected">Option 1</option> <option value="content_2">Option 2</option> <option value="content_3">Option 3</option> <select> <div id="content_1" class="vis">Content 1</div> <div id="content_2" class="inv">Content 2</div> <div id="content_3" class="inv">Content 3</div>