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

回答

相关问题