Javascript 通过 id 隐藏和显示元素不适用于多种情况

Question

我真的不知道任何 JavaScript，但我已经能够拼凑出一种方法，以编程方式隐藏网页上的 html 表，使用以下行的版本在页面打开时隐藏它们:

document.getElementById("approved").style.display = "none";

等等

然后根据从选择菜单中选择的值来显示该元素，使用:

document.getElementById('cboaim').addEventListener('change', function (){
var style = this.value == "10" ? 'block' : 'none';
document.getElementById('approved').style.display = style;
var style = this.value == "13" ? 'block' : 'none';
document.getElementById('enddate').style.display = style;
var style = this.value == "14" ? 'block' : 'none';
document.getElementById('tortm').style.display = style;
var style = this.value == "17" ? 'block' : 'none';
document.getElementById('enddate').style.display = style;
});

除了与“enddate”相关的两行之外，它几乎适用于所有内容。它适用于其中一个值，但不适用于另一个值。我假设引用元素 id 两次会破坏此代码(选择 13 和 17 都需要显示此日期框)。

由于更复杂的原因，我不能只添加另一个具有不同 id 的表，因此我希望有人知道解决该问题的简单方法。请对我温柔一点，我知道 javascript 可能会冒犯程序员;-)

如果更容易的话，我也很乐意使用附加到 select 上 onchange 的函数？我只使用 addeventlistener 因为在 stackoverflow 上搜索后找到了这个特定的解决方案。

干杯 莱斯

Answer 1

删除所有这些 var 语句。在同一作用域中多次声明相同的 var 是无效的 JS。

现在，对值 "17" 的检查将始终覆盖对 "13" 的检查，更改 'enddate' 上的条件元素:

document.getElementById('cboaim').addEventListener('change', function (){
    document.getElementById('approved').style.display = 
        this.value == "10" ? 'block' : 'none';

    document.getElementById('tortm').style.display = 
        this.value == "14" ? 'block' : 'none';

    document.getElementById('enddate').style.display = 
        (this.value == "13" || this.value == "17") ? 'block' : 'none';
});

如果值为“13”，这将设置'enddate'显示或如果值为“17” .