Question

以下是我所拥有的下拉列表的HTML代码。选择American选项后，<head>下的American（）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>

Answer 1

什么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方法上输入'＃'char来获取“text-inputs对象”。

Answer 2

如果您熟悉JQuery，那么使用脚本编写您的生活会轻松得多

只需编写一行代码即可完成：

$（'＃IdofTheDiv'）。show（）; //用于显示div http://api.jquery.com/show/ $（'＃IdofTheDiv'）。hide（）; //隐藏div http://api.jquery.com/hide/

此外，您甚至可以使用JQuery为div hide / show添加动画。

Javascript：根据下拉列表选择显示/隐藏div

2 个答案: