Div显示选择时隐藏 [英] Div Display Hide on Selection

问题描述

Hi有_我是一个新手，所有这一切，真正努力与一个下拉菜单，显示一个div加载，但然后隐藏的div，并替换另一个从下拉列表中选择。我花了几个小时试图找到这个权利，并看了一些选项。我最近的是对以前的问题。我已解决在这里。

Hi There _ I'm a Newbie to all of this and really struggling with a dropdown menu that displays a div on loading but then hides the div and replaces with another on selection from a dropdown. I've spent hours trying to get this right and looked at a number of options. The closest I've got is a response to an earlier question on this. I've settled on is here.

我调整它稍微不需要选择...。

I've adapted it slightly as don't want "Select...".

脚本保持不变，CSS。这是我修改的HTML：

Script remains the same, as does the CSS. Here is the HTML which I've adapted:

<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>

并且只是为了这里的脚本：

and just in case here's the script:

<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>

推荐答案

或者您可以使用 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>

这篇关于Div显示选择时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！