0

我有 2 种用户文本输入方式 - 通过输入文本字段，或通过从下拉菜单中选择预定义文本。Javascript 控制哪一个是可见的。所以我有这 2 个输入法和它们对应的 2 个标签：

<h:form id="test">
<div>
  <h:outputLabel id="label_1" value="Your text:" style="display:block" />
  <h:inputText id="txt" value="#{myform.inputText}" style="display:block" />

  <h:outputLabel id="label_2" value="Choose text:" style="display:none" />
  <h:selectOneMenu id="drop" value="#{myform.inputText}" style="display:none">
    <f:selectItem itemValue="11" itemLabel="Preselected text 1" />
    <f:selectItem itemValue="22" itemLabel="Preselected text 2" />
  </h:selectOneMenu>
</div>
</h:form>

javascript显示和隐藏元素：

if (...) {
  document.getElementById('label_1').style.display="none";
  document.getElementById('txt').style.display="none";
  document.getElementById('label_2').style.display="block";
  document.getElementById('drop').style.display="block";
}
else {
  document.getElementById('label_1').style.display="block";
  document.getElementById('txt').style.display="block";
  document.getElementById('label_2').style.display="none";
  document.getElementById('drop').style.display="none";
}

所以，要么label_1 + txt要么label_2 + drop 问题是：当页面加载时，只有label_1 + txt应该是可见的。不幸的是，label_1、label_2和 txt 是可见的！

为什么 drop 的定义 style="display:none" 有效而 label_2 的相同定义无效？

4

2 回答 2

0

隐藏标签

function Hide(id) {
    document.getElementById(id).style.visibility = "hidden";
}​

Hide('label_1');

显示标签

function Show(id) {
    document.getElementById(id).style.visibility = "visible";
}

Show('label_1');
于 2012-12-11T13:25:19.897 回答
0

解决方案是在正文中的脚本中添加一个 jQuery 块

$(document).ready(function() {
    $('[id$=label_2]').hide();
    $('[id$=drop]').hide();
});
于 2012-12-11T16:51:33.440 回答