Div顯示隱藏在選擇上

Question

嗨那里_我是所有這一切的新手，並且真的在下拉菜單中苦苦掙扎，顯示加載div但是然后隱藏div並從下拉列表中替換另一個選擇。 我花了好幾個小時試圖做到這一點並查看了許多選項。 我得到的最接近的是對此問題的回答 。 我已經安定下來了 。

我稍微調整了一下，因為不想要“選擇......”。

腳本保持不變，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>