Javascript：根據下拉列表選擇顯示/隱藏div

以下是我擁有的下拉列表的HTML代碼。在選擇American選項後，<head>下的American（）Javascript函數必須顯示另一個div。然而這不會發生。Javascript：根據下拉列表選擇顯示/隱藏div

的JavaScript：

<script type="text/javascript"> 
    function American(){ 
     <!-- Getting the Canadian -> Hiding it -> Turning 'on' the American. --> 
     var Canadian = document.getElementById('text-inputs-Canadian'); 
     Canadian.style.display = 'none'; 

     var American = document.getElementById('text-inputs-American'); 
     American.style.display = 'block'; 
    } 
</script>

的下拉列表：

<div id="dd" class="wrapper-dropdown-3" tabindex="1"> 
     <span>Standard</span> 
     <ul class="dropdown"> 
       <li><a href="#" onclick="American();">American</a></li> 
      <li><a href="#">Canadian</a></li> 
     </ul> 
</div>

，負責就#text-inputs-American DIV的被設置爲最初是隱藏的，像這樣：

#text-inputs-American{ 
    top:10px; 
    margin-right:-200px; 
    float:right; 
    position:relative; 
    display:none; /*Hides the input parameters until toggled by JS script*/ 
}

任何想法，我可能做錯了什麼？

編輯：請求的代碼，這必須是在div「顯示」

   <div id="text-inputs-American"> 
          <span id="text-labels">S<sub>s</sub>(g)</span> 
          <input type="number" step="any" /> 
          <span id="text-labels">S<sub>1</sub>(g)</span> 
          <input type="number" step="any" /> 
          <span id="text-labels">T<sub>0</sub>(g)</span> 
          <input type="number" step="any" /> 
          <span id="text-labels">T<sub>L</sub>(g)</span> 
          <input type="number" step="any" /> 
       </div>

來源

2013-05-16 Louis93

你的JS函數裏面的HTML風格的註釋讓我感到腥味。您的瀏覽器控制檯報告有哪些錯誤（如果有）？ –

是真的！嘗試在Javascript中使用標準註釋來將註釋放入JS函數中。 // Coment或/ *多行註釋*/ –

什麼標識具有div的到底是什麼？我想你混淆瞭如何使用的getElementById方法：

試試這個：

var Canadian = document.getElementById('text-inputs-Canadian'); 
Canadian.style.display = 'none'; 

var American = document.getElementById('text-inputs-American'); 
American.style.display = 'block';

不要把「＃」字符就要上的getElementById方法，在「文本輸入的對象」。

來源

2013-05-16 17:37:17

嗯，我試過了，沒有解決它。我將發佈剛纔「顯示」的div – Louis93

顯示你的代碼，我想看看他們有的divs和至極id。 –

你的代碼似乎很好，我不知道爲什麼現在不工作，如果你糾正了getElementById參數。 –

如果您熟悉JQuery的，你的生活是腳本更容易

它可以通過只寫一行代碼來完成：

$（「＃IdofTheDiv」）顯示（） ; //用於顯示DIV http://api.jquery.com/show/ $（ '＃IdofTheDiv'）隱藏（）; //隱藏在div

而且你甚至可以添加動畫的使用JQuery的DIV隱藏/顯示。

來源

2013-05-16 17:37:41

哇這個作品...我會用它，但我仍然喜歡我原來的問題的答案。 – Louis93

但是，謝謝你的洞察力 – Louis93

Javascript：根據下拉列表選擇顯示/隱藏div

回答

相關問題