刷新并填充动态添加的行

时间:2010-03-04 21:22:08

标签: javascript dhtml

我有一个按钮,当按下该按钮时,将添加一个新的HTML行。在这些行中有两个组合框:cboOffsetGroup和cboOffsetType。根据cboOffsetGroup中选择的内容,cboOffsetType的选项将更改。我在Javascript中使用refreshPage()函数执行此操作。它在第一行中工作正常,但在随后添加的行中,我无法弄清楚如何调用refreshPage()函数,以便我可以填充cboOffsetType的相应选项。对此有任何帮助表示赞赏。请注意,我在这方面几乎是一个新手,并且意识到这可能不是最好的代码,但这是我必须要处理的。谢谢!

 <%
Dim CN, RS, vIndexOffset, vOffsetGroup

Set CN = GetDataConnection

vIndexOffset = Request.Form("txtOffsetIndex")
%>

<body>
<form name="frmExceptionInput" id="frmExceptionInput" method="post">
<input type="hidden" name="txtAction" id="txtAction" value="">

<table width="50%" id="tblOffsetDetail">
<tbody>
    <tr>
        <td colspan="2">
        <input type="button" class="button" value= "Add New Item" id="btnNewOffsetItem" name="btnNewOffsetItem" onClick="javascript:addNewOffsetItem();">
        <input type="hidden" id="txtOffsetIndex" name="txtOffsetIndex" value="1">
    </td>
    </tr>
    <tr>
        <td>
            <p>
            <select name="cboOffsetGroup1" id="cboOffsetGroup1" onChange="refreshPage();">
                <option value="0"></option>
                <%
                Set RS = CN.Execute ("spSelectGroup")
                If Not RS.EOF Then
                    Do While Not RS.EOF
                        %>
                        <option value='<%= RS("offsetGroupID")%>'<%If RS("offsetGroupID") = Request.Form("cboOffsetGroup" & vIndexOffset) Then Response.Write " selected"%>><%= RS("offsetGroup")%></option>    
                        <%
                        'Get next record
                        RS.MoveNext
                    Loop
                End If  
                %>
            </select>
            </p>        
        </td>
        <td>
            <p>
            <select name="cboOffsetType1" id="cboOffsetType1">
            <%
            'If the user changes the combo box selected, set vOffsetGroup = the value selected by the user on the page.
            If Request.Form("txtAction") = "Change Selection" Then
                vOffsetGroup = Request.Form("cboOffsetGroup" & vIndexOffset)
            End If
            %>  
            <option value="0"></option>
            <%
            Set RS = CN.Execute ("spSelectType @vOffsetGroup='" & vOffsetGroup & "'")
            If Not RS.EOF Then
                Do While Not RS.EOF
                    %>
                    <option value='<%= RS("offsetItemTypeID")%>'<%If Request.Form("cboOffsetType1") = RS("offsetItemTypeID") Then Response.Write "selected"%>><%= RS("offsetItemType")%></option>
                    <%
                    'Get next record
                    RS.MoveNext
                Loop
            End If
            %>
            </select>
            </p>
        </td>
    </tr>
</tbody>
</table>

</form>
</body>

<script language="javascript">

function refreshPage()
{
    var refreshPage = document.getElementById("frmExceptionInput");

    //If this function is called, the value of txtAction will become "Change Selection."
    document.getElementById("txtAction").value = "Change Selection";

    refreshPage.submit();
}

//Display additional rows.
function addNewOffsetItem()
{
    var iX = document.getElementById("txtOffsetIndex").value;
    iX ++;
    document.getElementById("txtOffsetIndex").value = iX;

    var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0];
    var tr = document.createElement("TR");
    tbl.appendChild(tr);

    //cboOffsetGroup1
    var tdOffsetGroup = document.createElement("TD");
    tr.appendChild(tdOffsetGroup);

    var p = document.createElement("P");
    tdOffsetGroup.appendChild(p);

    var cboOffsetGroup = document.createElement("select"); 
    p.appendChild(cboOffsetGroup);

    cboOffsetGroup.id = "cboOffsetGroup" + iX;
    cboOffsetGroup.setAttribute('name','cboOffsetGroup' + iX);

    var cboOffsetGroup1 = document.getElementById("cboOffsetGroup1");
    var i = 0;

    for (i = 0; i < cboOffsetGroup1.children.length; i++)
        {
            var opt = document.createElement("option");
            opt.value = cboOffsetGroup1 [i].value;
            opt.innerText = cboOffsetGroup1 [i].innerText;
            cboOffsetGroup.appendChild(opt);
        }   

    //cboOffsetType1
    var tdOffsetType = document.createElement("TD");
    tr.appendChild(tdOffsetType);

    var p = document.createElement("P");
    tdOffsetType.appendChild(p);

    var cboOffsetType = document.createElement("select"); 
    p.appendChild(cboOffsetType);

    cboOffsetType.id = "cboOffsetType" + iX;
    cboOffsetType.setAttribute('name','cboOffsetType' + iX);

    var cboOffsetType1 = document.getElementById("cboOffsetType1");
    var i = 0;

    for (i = 0; i < cboOffsetType1.children.length; i++)
        {
            var opt = document.createElement("option");
            opt.value = cboOffsetType1 [i].value;
            opt.innerText = cboOffsetType1 [i].innerText;
            cboOffsetType.appendChild(opt);
        }
}

</script>
</html>

1 个答案:

答案 0 :(得分:1)

你最好使用JQuery来完成这类任务。

http://api.jquery.com/add/