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