Question

我为用户提供了两种文本输入方式 - 通过输入文本字段，或从下拉菜单中选择预定义文本。 Javascript控制哪一个可见。所以我有这两种输入方法及其相应的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的定义样式=“display：none”工作，而label_2的定义不同？

Answer 1

隐藏标签

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

Hide('label_1');

显示标签

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

Show('label_1');

Answer 2

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

$(document).ready(function() {
    $('[id$=label_2]').hide();
    $('[id$=drop]').hide();
});

display：none不适用于标签

2 个答案: