Question

我有4个div，并希望在进行下拉选择时显示相关div的内容。我能够找到一些非常接近的东西并试图调整以完全按照我的需要行事，但我没有运气。我希望第一个div的内容默认显示在初始加载上，然后显示（替换）所做的任何选择。它可能看起来不像我花了很多时间从代码中，但我现在所拥有的是非常混乱，我不得不把它拉出来，以便更容易理解我想要做什么。请帮忙。

<select id="target">
    <option value="content_1" selected="selected">Content All</option>
    <option value="content_2">Content 2</option>
    <option value="content_3">Content 3</option>
    <option value="content_4">Content 4</option>
<select>
<div id="content_1" class="inv">
    Content All
</div>
<div id="content_2" class="inv">
        Content 2
</div>
<div id="content_3" class="inv">
        Content 3
</div>

<div id="content_4" class="inv">
        Content 4
</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

处理此问题的一种简单方法是了解您将有4个有效的列表选项可供选择（第一个没有计数）和相同数量的隐藏div。与所选列表项对应的div是要显示的div。

见内联评论：

＆＃13;

// Get a reference to the default div
var defaultDiv = document.getElementById("default");

// Get all the hidden <div> elements into an array
var hiddenDivs = Array.prototype.slice.call(document.querySelectorAll(".hidden"));

document.getElementById('target').addEventListener('change', function () {
  // Hide all the divs
  defaultDiv.classList.add("hidden");
  hiddenDivs.forEach(function(div){ div.classList.add("hidden") });
  
  // Show the div that corresponds to the index of the selected list item
  // We subtract 1 from the selected index to account for the first option, 
  // which really isn't a valid selection.
  hiddenDivs[this.selectedIndex -1].classList.remove("hidden");
  
});

＆＃13;

.hidden { display:none; }

＆＃13;

<select id="target">
        <option value="" selected="selected">Content All</option>
        <option value="content_1">Content 1</option>        
        <option value="content_2">Content 2</option>
        <option value="content_3">Content 3</option>
        <option value="content_4">Content 4</option>
    <select>
    
    <div id="default">Default</div>
    <div class="hidden">Other 1</div> 
    <div class="hidden">Other 2</div>  
    <div class="hidden">Other 3</div>  
    <div class="hidden">Other 4</div>

＆＃13;

在加载时显示内容

1 个答案: