页面输入框的隐藏主要是对一个下拉列表选择不同的数据时,另外一个输入框的各种变化(如下拉框的值,隐藏和显示等等)
前提:此表单对应的ActionForm
例:如下拉列表选框<html:select property="number" onchange="setType()">
<html:option value="one">壹</html:option>
<html:option value="two">贰</html:option>
</html:select>
当选择数字"壹"、"贰"、"叁"的时候,都会调用"setType()"方法
一、首先我们看隐藏和显示
此行默认是为隐藏的(属性style=display:none表示隐藏)
<tr>
<td><div id=enabledLoginName style=display:none>姓名</div></td>
<td><div id=enabledLoginValue style=display:none><input type="text" size="22" name="Name"/></div></td>
</tr>
如要显示此行则(属性style=display:""表示显示)
就要设置值:document.getElementById('enabledLoginName').style.display="";
document.getElementById('enabledLoginValue').style.display="";
二、下拉框的值变化
此行只显示一个下拉框的值
<tr>
<td>类型</td>
<td><html:select property="type">
<html:option value="A">A</html:option>
</html:select>
</td>
</tr>
若要显示别的值则:
for(i=0;i<document.WenForm.type.length;i++){
document.all.type.options[i]=null;
}
document.WenForm.type.options[0]=new Option("B","B");//新增下拉列表
全部的setType()方法是:(当number="one"时,显示一行;当number="two"时,下拉框值变化)
<script>
function setType(){
if(document.WenForm.number.value="one"){
document.getElementById('enabledLoginName').style.display="";
document.getElementById('enabledLoginValue').style.display="";
}
else if(document.WenForm.number.value="two"){
for(i=0;i<document.WenForm.type.length;i++){
document.all.type.options[i]=null;
}
document.WenForm.type.options[0]=new Option("B","B");
}
}
</script>
有时候在进入该页面的时候就要判断上面的显示和值变换,这时我们就要在jsp页面最下面写上:
………
<script>
setType();
</script>
</body>
</html>
表示进入该页面就调用setType()方法