我是这方面的初学者,我根据其他例子制作了我的编码。 我想基于两个下拉列表进行动态下拉列表,即第一个选定内容和第二个下拉列表将根据第一个下拉列表进行过滤。 但问题是当多行时,代码不是函数,因为它没有携带行id,我不知道如何在该函数上携带行id
以下是我制作的代码
financialDataList.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
。