Div 显示隐藏选择

Question

您好 _ 我是所有这一切的新手，并且在加载时显示一个 div 但随后隐藏该 div 并在从下拉列表中选择另一个时替换为另一个下拉菜单时真的很挣扎。我花了几个小时试图做到这一点，并查看了许多选项。我得到的最接近的是对an earlier question on this 的回复。我已经选择了is here。

我稍微调整了一下，因为不想“选择...”。

脚本和 CSS 一样。这是我改编的 HTML：

<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 事件：

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>