1

我是这方面的初学者，我已经根据其他示例进行了编码。我想根据两个下拉列表制作动态下拉列表，即当第一个被选中时，第二个将根据第一个下拉列表进行过滤。但问题是当多行时，代码不是函数，因为它不携带行 id，我不知道如何在该函数上携带行 id

以下是我制作的代码

财务数据列表.jsp

<script language="JavaScript" type="text/JavaScript">

function addRowToTable()
{
    var tbl = document.getElementById('data');
    var lastRow = tbl.rows.length;
    var iteration = lastRow-1;                
    var row = tbl.insertRow(lastRow);
    row.vAlign = "top";

    var cnt = iteration+1

    //cell 1                
    var cell1 = row.insertCell(0);
    var elem1 = document.createElement('select');
    elem1.setAttribute("id","typeCode"+iteration);
    var option = document.createElement('option');
    option.value='';
    option.textContent='-Select-';
    elem1.name = 'typeCod'; 
    //alert("[ "+this.value+" , "+elem1+" , "+option+" , "+elem1.value+" ]");
    elem1.setAttribute("onchange","showAcct(this.value, 'acctCode"+iteration+"')"); 
    elem1.appendChild(option);
    cell1.appendChild(elem1); 

    // generate list of typeCod option value for select 
    var finTypeLOV = document.forms[0].finTypeLOV.value; 
    var tFinTypeLOV = finTypeLOV.split("|");

    for (i = 0; i < tFinTypeLOV.length; i++){
        if (tFinTypeLOV[i] != '') {
            var tFinTypeValue = tFinTypeLOV[i].split("=");
            appendOptionLast("typeCode"+iteration, tFinTypeValue[0], tFinTypeValue[1]);
        }
    } 

    //cell 2                                
    var cell2 = row.insertCell(1);
    var elem2 = document.createElement('select');
    elem2.setAttribute("id","acctCode"+iteration); 
    var option = document.createElement('option');
    option.value=''; 
    option.textContent='-Select-';
    elem2.name = 'acctCod'; 
    elem2.appendChild(option);
    cell2.appendChild(elem2);
}

var xmlHttp  
function showAcct(typeCod,id){ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request")
        return
    }
    var url="financialDataDropdown.jsp";
    url +="?typeCod=" +typeCod+ "&id=" +id; 
    xmlHttp.onreadystatechange = acctChange;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function acctChange(){ 
    frm = document.forms['form1']; 
    var tbl = document.getElementById('data'); 
    var lastRow = tbl.rows.length; 
    var iteration = lastRow-2; 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
        if(frm.typeCod.size != 0 || frm.acctCod.id != "acctCode"){ 
            var id2 = "acctCode"+iteration; //nilainyer acctCode2
            document.getElementById(id2).innerHTML=xmlHttp.responseText;
        } else {
            document.getElementById("acctCode").innerHTML = xmlHttp.responseText; 
        }
    }   
}

function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        //Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}
</script>
<!--.........some code not show here..........-->
<table>
    <tr>
        <td>
            <select id="typeCode" name='typeCod' onchange="showAcct(this.value, 'acctCode')">  
            <%
                opt = fin.optionRefFinType(false, typeCod, typeCod);
                for (int i = 0; i < opt.size(); i++) {
            %>
            <%=opt.elementAt(i)%>
            <% }%>
            </select>
        </td>
        <td> 
            <select id='acctCode' name='acctCod' >  
                <option value='-1'>-Select-</option>  
            </select>  
        </td>
    </tr>
</table>

以上是我制作的 javascript，我使用函数 addRowToTable() 在默认行上添加具有相同功能的多行。

我在第一个下拉菜单中调用showAcct()函数。onchange

4

0 回答 0