select OnChange 在表单中不起作用

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是未定义的变量，不是你想的那样的参数。
您 showing/hiding 的 <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（Element，而不是 Elements）。如果你只是 showing/hiding 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;">

select OnChange 在表单中不起作用

select OnChange not working within a form

html

javascript

css

webpage