根据下拉菜单中的选择更改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>