Question

我有一个下拉菜单，当用户选择一个选项时，应在下拉菜单下方填充相应的内容。这是可以实现的和有效的。但是，我希望内容在两个部分同时更改 - 如前所述，下一部分和右边一部分（与主题1，主题2，主题3一样）。

当我将内容设置为显示在右下方AND右侧时，它仅显示右侧的内容（如选择下拉选项主题1，主题2，主题3时所见）。

我知道存在一个问题，因为我在两个不同的场合使用id（一个位于下拉列表中的div中，另一个位于下拉列表右侧的div中）。但是，我确实将javascript从document.getElementById更改为document.getElementByClass并将所有ID更改为类，因为有些被使用了两次。但是，当我改变HTML / JS使用类时，JS根本没有呈现。

是否有任何见解为什么我无法同时在右侧和下方同时显示这两个内容？任何见解将不胜感激。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="jquery-1.12.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="jquery-1.12.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


</head>

<body>
<br><br><br>
<div class="container">
    <div class="row">
        <div class="col-md-6">

            <!-- DROPDOWN MENU -->
            <select name="dropdown" id="dropdown">
                <option value="0">Select Topic</option>
                <option value="1">Topic 1</option>
                <option value="2">Topic 2</option>
                <option value="3">Topic 3</option>
                <option value="4">Topic 4</option>
                <option value="5">Topic 5</option>
                <option value="6">Topic 6</option>
                <option value="7">Topic 7</option>
                <option value="8">Topic 8</option>
                <option value="9">Topic 9</option>
                <option value="10">Topic 10</option>
                <option value="11">Topic 11</option>
            </select>
        </div>

        <!-- CONTENT OFF TO THE RIGHT -->
        <div class="col-md-6" >

            <div class="content" id="1" > 
                TOPIC 1 - RIGHT
            </div>

            <div class="content" id="2">  
                TOPIC 2 - RIGHT
            </div>

            <div class="content" id="3">  
                TOPIC 3 - RIGHT
            </div>

        </div>
    </div>
</div>

<!-- CONTENT BELOW FORM -->
<div class="container">
    <div class="row">
        <div class="col-md-12">

                <div class="content" id="0" style="display: block">
                     SELECT TOPIC
                </div>     
                <div class="content" id="1">
                    DISPLAYING TOPIC 1
                </div>

                <div class="content" id="2">
                    DISPLAYING TOPIC 2
                </div>

                <div class="content" id="3">
                    DISPLAYING TOPIC 3
                </div>

                <div class="content" id="4">
                    DISPLAYING TOPIC 4
                </div>

                <div class="content" id="5">
                    DISPLAYING TOPIC 5
                </div>

                <div class="content" id="6">
                    DISPLAYING TOPIC 6
                </div>

                <div class="content" id="7">
                    DISPLAYING TOPIC 7
                </div>

                <div class="content" id="8">
                    DISPLAYING TOPIC 8
                </div>

                <div class="content" id="9">
                    DISPLAYING TOPIC 9
                </div>

                <div class="content" id="10">
                    DISPLAYING TOPIC 10
                </div>

                <div class="content" id="11">
                    DISPLAYING TOPIC 11
                </div>

        </div>
    </div>
</div>


  </body>
</html>

CSS

.content {
      display: none;
}

JAVASCRIPT

document.getElementById('dropdown').onchange = function() {
                var i = 0; // 
                var topicNumber = document.getElementById(i);
                while(topicNumber) {
                    topicNumber.style.display = 'none';
                    topicNumber = document.getElementById(++i);
                }
                document.getElementById(this.value).style.display = 'block';
};

Answer 1

考虑以下forked codepen

id是独一无二的，并且调整了以下Javascript

document.getElementById('dropdown').onchange = function() {
    //Loop over all the topics to make them invisible
    var topics = document.getElementsByClassName('content');
    for (var i = 0; i < topics.length; ++i) {
        var item = topics[i];  
        item.style.display = 'none';
    }
    document.getElementById("left"+(this.value)).style.display = 'block';
    document.getElementById("right"+(this.value)).style.display = 'block';
};

正如Roamer-1888所说，你的身份必须在[你的页面]中是唯一的，以便“唯一地”识别它们。

最后，在您的情况下也没有必要使用纯JS，因为您看到包含jQuery（顺便说一下，您已经添加了4次相同的库）。

Answer 2

Div ids＆＃34; 1＆＃34;，＆＃34; 2＆＃34;和＆＃34; 3＆＃34;重复。

如果您要通过ID来解决您的div，那么ids 必须是唯一的。

有很多方法可以完成这项工作。例如，通过为每个集合赋予前缀来使id唯一：

<div class="content" id="right1">
    TOPIC 1 - RIGHT
</div>
<!-- etc. -->

<div class="content" id="under1">
    DISPLAYING TOPIC 1
</div>
<!-- etc. -->

现在，您可以可靠地解决＆＃34;权利＆＃34;设置和＆＃34; under＆＃34;独立设定。

由于问题标记为jQuery，这里是一个jQuery解决方案：

$('#dropdown').on('change', function() {
    var i = $(this).val();
    $('#right' + i).show().siblings().hide();
    $('#under' + i).show().siblings().hide();
};

如果你愿意，那么无论如何都要在POJS中编码，但它会有更多行。

使用下拉菜单更改两个不同Div中的内容

2 个答案: