使用下拉菜單更改兩個不同Div的內容

我有一個下拉菜單，當用戶選擇一個選項時，相應的內容應填充到下拉菜單下方。這是可以實現的，也是可行的。但是，我希望內容同時在兩個部分中更改 - 前面提到的一個部分和右側的一個部分（與主題1，主題2，主題3一樣）。使用下拉菜單更改兩個不同Div的內容

當我將內容設置爲顯示在右下方時，它只顯示右側的內容（如選擇下拉選項主題1，主題2，主題3時看到的那樣）。

http://codepen.io/anon/pen/bpBpaV

我知道是因爲我使用的ID在兩個不同的場合（一個在下拉列表下方的股利和一個在一個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'; 
};

來源

2016-03-15 martin934

考慮以下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'; 
};

由於流浪者，1888年說，你的ID 必須是唯一以[你的頁內]以「唯一」的方式識別它們。

最後，在你的情況下，你也不需要使用純JS，因爲你看到你包含jQuery（你已經添加了4次相同的庫）。

來源

2016-03-15 02:18:47

完美，謝謝！你對保持所有身份證的獨特性是正確的。 – martin934

div編號「1」，「2」和「3」被重複。

如果您打算通過ID解決您的div，那麼ID 必須是唯一的。

有很多方法可以完成這項工作。例如，使通過給每個獨特的ID設置一個前綴：

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

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

現在，您可以可靠地解決「正確」設置和獨立設置「下的」。

隨着問題被標記jQuery的，這裏有一個jQuery的解決方案：

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

如果你想，然後通過各種手段代碼這POJS但它會更多的線路。

來源

2016-03-15 00:47:42

這就是我提到的問題。使他們相同我用類，但沒有奏效。我怎麼能使用唯一的ID或更改JS來整合請求來改變這兩個部分，而不僅僅是一個 – martin934

謝謝。這是另一個很好的方法去做 – martin934

使用下拉菜單更改兩個不同Div的內容

回答

相關問題