Html 样式=“显示：无”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8346152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
style="display: none" not working
提问by user1046203
I created actions to pre-populate lists that I can reuse for different jsp pages. I need to be able to show/hide these lists using javascript. I used the following code but it is not working.
我创建了用于预填充列表的操作，这些列表可以重用于不同的 jsp 页面。我需要能够使用 javascript 显示/隐藏这些列表。我使用了以下代码，但它不起作用。
I'm using struts2 and spring
我正在使用 struts2 和 spring
javascript
javascript
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("hihDiv").style.display = '';
jsp
jsp
<tr id="hihDiv" style="display: none">
<td class="leftAligned"><s:action name="HIHRef" executeResult="true" /></td>
</tr>
action jsp
动作jsp
<s:select id="reviewContractor" size="5" name="reviewContractor" size="1" list="reviewContractors"
label="Review Contractor" onchange="showReviewContractor(this.value)"/>
<s:select size="5" size="1" id="hih" list="hihs" name="hih" label="HIH" />
The lists are pre-populating fine but when I change the selection for the reviewContractor select it should show/hide the hihDiv row and it is not working. I'm not sure if it is not working because of the <s:action>tag. When I used a select with the options in the jsp page the javascript worked but I was unable to pre-populate the lists from the database. Now with the s:actiontag I can pre-populate the lists but the show/hide is not working.
列表预填充很好，但是当我更改 reviewContractor select 的选择时，它应该显示/隐藏 hihDiv 行并且它不起作用。我不确定它是否因为<s:action>标签而不起作用。当我在 jsp 页面中使用带有选项的选择时，javascript 可以工作，但我无法从数据库中预先填充列表。现在使用s:action标签，我可以预先填充列表，但显示/隐藏不起作用。
Any suggestions please??
请问有什么建议吗？？
Here is my javascript. There are several selects that need to show/hide but I want to get one working first.
这是我的 javascript。有几个选择需要显示/隐藏，但我想先让一个工作。
function showReviewContractor(val){
var value = parseInt(val);
alert(value);
switch(value){
case 0:
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("claimDiv").style.display = '';
document.getElementById("racDiv").style.display = '';
document.getElementById("macDiv").style.display = '';
document.getElementById("certDiv").style.display = '';
document.getElementById("permDiv").style.display = '';
alert("all");
break;
case 1: //rac
document.getElementById("claimDiv").style.display = '';
document.getElementById("racDiv").style.display = '';
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("macDiv").style.display = 'none';
document.getElementById("certDiv").style.display = 'none';
document.getElementById("permDiv").style.display = 'none';
alert("rac");
break;
case 2: //mac
document.getElementById("claimDiv").style.display = '';
document.getElementById("macDiv").style.display = '';
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("racDiv").style.display = 'none';
document.getElementById("certDiv").style.display = 'none';
document.getElementById("permDiv").style.display = 'none';
alert("mac");
break;
case 3: //cert
document.getElementById("claimDiv").style.display = '';
document.getElementById("certDiv").style.display = '';
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("racDiv").style.display = 'none';
document.getElementById("macDiv").style.display = 'none';
document.getElementById("permDiv").style.display = 'none';
break;
case 4: //perm
document.getElementById("claimDiv").style.display = '';
document.getElementById("permDiv").style.display = '';
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("racDiv").style.display = 'none';
document.getElementById("macDiv").style.display = 'none';
document.getElementById("certDiv").style.display = 'none';
break;
/*case 5:
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("claimDiv").style.display = '';
document.getElementById("racDiv").style.display = 'none';
document.getElementById("macDiv").style.display = 'none';
document.getElementById("certDiv").style.display = 'none';
document.getElementById("permDiv").style.display = 'none';
break;
case 6:
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("claimDiv").style.display = 'none';
document.getElementById("racDiv").style.display = 'none';
document.getElementById("macDiv").style.display = 'none';
document.getElementById("certDiv").style.display = 'none';
document.getElementById("permDiv").style.display = 'none';
break;
case 7:
document.getElementById("hihDiv").style.display = 'none';
document.getElementById("claimDiv").style.display = 'none';
document.getElementById("racDiv").style.display = 'none';
document.getElementById("macDiv").style.display = 'none';
document.getElementById("certDiv").style.display = 'none';
document.getElementById("permDiv").style.display = 'none';
break;
*/
default:
break;
}
}
回答by Dave Newton
Unless you've explicitly set the theme to "simple", the <s:select>tag will be rendering its own table rows/cells, creating invalid HTML. (I'd have to check if the S2 form tags must be explicitly nested in a form tag as in S1, I thinkit'd work as you have it delta not creating bogus HTML).
除非您已明确将主题设置为“简单”，否则该<s:select>标签将呈现其自己的表格行/单元格，从而创建无效的 HTML。（我必须检查 S2 表单标签是否必须像 S1 一样显式嵌套在表单标签中，我认为它会起作用，因为您拥有它而不创建虚假的 HTML）。
<s:select (all your stuff, but add) theme="simple" />
I'd really recommend not doing it like this, though--rather create the select list in the action and expose it directly to the JSP.
不过，我真的建议不要这样做——而是在操作中创建选择列表并将其直接公开给 JSP。
回答by Moe
try putting the form style as simple in jsp struts2 form and try to look in how do you call the function because maybe you're doing something wrong
尝试将表单样式放在 jsp struts2 表单中，并尝试查看如何调用该函数，因为也许您做错了什么
