动态表单问题

我做过了个依据select选项动态显示input的页面，js代码如下        $(document).ready(function(){
  $("#orderPrice").hide();
  $("#orderQuantity").hide();
    });
function typeChange(value){
      if(value == 4){
        $("#orderPrice").show();
  $("#orderQuantity").show();
  }
  else{
  $("#orderPrice").hide();
  $("#orderQuantity").hide();
  }    
}    包含这个jsp页面的html代码如下：<body>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td align="left">
            <table class="tbl_layout" cellpadding="0" cellspacing="0">
                <colgroup>
                    <col width="2%"/>
                    <col width="98%"/>
                </colgroup>
                <tr>
                    <td rowspan="4">&nbsp;</td>
                    <td>
                        <%@include file="header.jsp" %>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br/>
                        <table cellpadding="0" cellspacing="0">
                            <colgroup>
                            <col width="20%"/>
                            <col width="80%"/>
                            </colgroup>
                            <tr>
                                <td class="tbl_header">
                                    <%@include file="menu.jsp" %>
                                </td>
                                <td class="tbl_header">
                                 <iframe src="${foaPath}/stock_portfolio_init.htm" scrolling="no" width="100%" height="159px" valign="top" name="mainFrame" id="mainFrame" frameborder="0" ></iframe>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <div id="footerdiv">
                <tr>
                    <td>
                     <table cellpadding="0" cellspacing="0">
                     <tr>
                     <td>
                     <br/>
                     <br/>
                     <iframe src="${foaPath}/realtime_quote_search.htm" scrolling="no" width="100%" height="60px" valign="top" name="rtqpFrame" id="rtqpFrame" frameborder="0" ></iframe>
                     </td>
                     </tr>
                     <tr>
                     <td>
                     <%@include file="footer.jsp" %>
                     </td>
                     </tr>
                     </table>
                    </td>
                </tr>
                </div>
            </table>
        </td>
    </tr>
</table>
</body>
现在碰到的问题就是当下拉框选到4的时候两个input能显示出来，但是<div id="footerdiv">并没有下移，挡住了form最下面的提交按钮
刚开始学这做页面，求达人帮忙！！！

解决方案 »

  1.   

    你可以这样
    css:
    #footerdiv{
     position:relative;
    }
    js: function typeChange(value){
             if(value == 4){
                 $("#orderPrice").show(function (){
                 $("#orderQuantity").show(function(){                        $('#footerdiv').css('top','$('#orderPrice').height()+$('#orderQuantity').height()')           
    });
    });
               
             }
             else{
                 $("#orderPrice").hide(function (){
    $("#orderQuantity").hide(function (){
    $('#footerdiv').css('top',0);
    });
    });
                 
             }       
        }