Question

我对这一切还比较陌生，所以请忍受我的hackjob代码。更改下拉菜单的值后，我试图使用JavaScript切换div在我的网页上的可见性。出于某种奇怪的原因，它无法正常工作，我已经用尽了所有提出的解决方案。 Google并没有提供太多帮助，主要是因为我不知道要搜索的正确术语以及要查找的内容。

有人可以帮我吗？这是我遇到的代码：

<script type="text/javascript">

    function toggle_visibility(options) {
        var e = document.getElementsById(options);
        if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';

    }
</script>

 <div class="form-group">
                <label for="Services">Please select a service</label>
                <select class="form-control" name="Services" onchange="toggle_visibility(options);">
                    <option>Please select...</option> 
                    <option value="1">Regular Clean</option>
                    <option value="2">One-off Clean</option>
                    <option value="3">Spring Clean</option>
                </select>
            </div>


        <div id="options" style="display: none;">

提前谢谢！！

Answer 1

您有getElementsById，它不是有效的JavaScript，应该为getElementById。另外，您的参数和参数名称相同，所以这是我要做的：

<script type="text/javascript">

    function toggle_visibility() {
        var e = document.getElementById("options");
            if(e.style.display == 'block')
        e.style.display = 'none';
            else
        e.style.display = 'block';
}

</script>

<div class="form-group">
    <label for="Services">Please select a service</label>
    <select class="form-control" name="Services" onchange="toggle_visibility();">
        <option>Please select...</option> 
        <option value="1">Regular Clean</option>
        <option value="2">One-off Clean</option>
        <option value="3">Spring Clean</option>
    </select>
</div>


    <div id="options" style="display: none;">

Answer 2

如果您希望通过菜单更改来替代可见性，则您的模式正确，但缺少一些详细信息：

getElementsById不是一个函数（它是getElementById的单数-每个id都是唯一的）。
options是未定义的变量，而不是您认为的参数。
您要显示/隐藏的<div>元素中没有内容，因此很难验证是否有任何内容。
您的<div>没有结束标记。
在JS中使用camelCase代替snake_case（美观但很重要）。

function toggleVisibility() {
  var e = document.getElementById("options");
  e.style.display = e.style.display === 'block' ? 'none' : 'block';
}

<div class="form-group">
  <label for="Services">Please select a service</label>
  <select class="form-control" name="Services" onchange="toggleVisibility();">
    <option>Please select...</option>
    <option value="1">Regular Clean</option>
    <option value="2">One-off Clean</option>
    <option value="3">Spring Clean</option>
  </select>
</div>

<div id="options" style="display: none;">Hello world!</div>

您也可以考虑研究event listeners并避免使用内联CSS，以便将行为，样式和标记分开。

Answer 3

第一个问题是options在您的onchange属性中毫无意义。您可以将其作为字符串传递给getElementById（元素，而不是元素）。如果您在更改下拉列表时随时显示/隐藏div，则相对来说比较简单：

<script type="text/javascript">
    function toggle_visibility() {
        var e = document.getElementById("options");
        if (e.style.display == 'block') {
            e.style.display = 'none';
        }
        else {
            e.style.display = 'block';
        }
   }
</script>

 <div class="form-group">
    <label for="Services">Please select a service</label>
    <select class="form-control" name="Services" onchange="toggle_visibility();">
        <option>Please select...</option> 
        <option value="1">Regular Clean</option>
        <option value="2">One-off Clean</option>
        <option value="3">Spring Clean</option>
    </select>
</div>


<div id="options" style="display: none;">

选择OnChange在表单中不起作用

3 个答案: