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可能会冒犯程序员; - ）

如果更容易，我还会愉快地使用附加到on的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';
});

如果值为'enddate' ，则会"13"设置"17"，如果值为CHARACTER *8 INDICATIF_BUT(NPTBUTS,NBPDV)，则会设置。

Answer 2

~~您不能拥有两个具有相同ID的元素，因为id应该是唯一标识符。您必须找到一种方法来为表格提供单独的ID。~~

如果你想做这样的事情你可以给他们相同的名字（或类），并做这样的事情：

var style = this.value == "13" ? 'block' : 'none'; document.getElementsByName('enddate')[0].style.display = style; //First enddate element style = this.value == "17" ? 'block' : 'none'; document.getElementsByName('enddate')[1].style.display = style; //Second enddate element

<击>

此外，每次编写var style = ...时，您都要定义一个新变量。与上面类似，变量实际上不应该具有相同的名称。因此，您应该为它们指定不同的名称，或者从除第一个之外的所有关键字中删除var关键字。

修改

我刚刚意识到问题并不像我想的那么清楚：你可能意味着如果从菜单中选择13或17，那么样式并不总是应用于单个元素？

在这种情况下，您需要一个if语句来决定是否选择了13 OR 17，并应用了正确的样式。例如：

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

您的代码存在的问题是17的检查是单独完成的，检查13后，覆盖该样式。因此，当选择13时没有任何事情发生。

Javascript通过ID隐藏和显示元素不适用于多个案例

2 个答案: