以下是我的下拉列表的 HTML 代码。选择 American选项，<head> 下的 American() Javascript 函数必须显示另一个分区。然而，这不会发生。
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>
最佳答案
哪些 id 具有 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 方法上输入“#”字符以获取“文本输入对象”。
关于Javascript:根据下拉列表选择显示/隐藏div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16593849/