CSS的display属性【转】

本文介绍了一种通过JavaScript实现的表单动态调整方法,包括根据下拉列表的选择来显示或隐藏特定输入框,以及更改下拉列表的内容。

页面输入框的隐藏主要是对一个下拉列表选择不同的数据时,另外一个输入框的各种变化(如下拉框的值,隐藏和显示等等)

前提:此表单对应的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()方法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值