Struts+Ajax Dependency of 2 comboboxes

Hi,
It`s very urgent issue to me!

My problem is I have 2 <html:select> list
1.products combo list
2subProducts combo list

Problems:

1.If i select any one product, i have to make a ajax call and i need to display the subproducts of the selected product. These is coming from database

2.If i selected more than one product in product combo list, i need to display the list of suboproducts of the selected products.

I am getting the values from database like this |subproduct1|subproduct2|subproduct3


My code is

in jsp


function updateSubproductarea() {
alert("In updateSubproductarea");

var product = document.getElementById("productarea");

//if(product.selectedIndex==0){
// return;
// }
selectedProduct = product.options[product.selectedIndex].value;
alert(selectedProduct);
var url = "../servlet/CreateTestCase.do?action=create";
url="../servlet/CreateUser.do?action=subproduct&selectedProduct="+selectedProduct;



if (window.XMLHttpRequest){ // Non-IE browsers
req = new XMLHttpRequest();

//A call-back function is define so the browser knows which function to call after the server gives a reponse back
req.onreadystatechange = populateSecondBox;
alert(req.readystate);
try {
req.open("GET", url, true); //was get
} catch (e) {
alert("Cannot connect to server");
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = populateSecondBox;
req.open("GET", url, true);
req.send();
}
}
}



function populateSecondBox(){
//document.getElementById('productSubarea').options.length = 0;
// var subproduct=document.getElementById('productSubarea');
if (req.readyState == 4) { // Complete
if (req.status == 200) {
alert("hiiiiiii");// OK response
var textToSplit = req.responseText
if(textToSplit == '803'){
alert("No select option available on the server")
}
if(textToSplit!=""){ //Split the document
var returnElements=textToSplit.split("|");
alert("&&&&&&&&&&&"+returnElements.length);
alert("returnElements"+returnElements);
document.forms[0]. productSubarea.length =returnElements.length+1;
//subproduct.options.value="All";
alert("heeeeeeellllll");

//if(returnElements!=null)
// {
for ( var i=0; i<returnElements.length; i++ ){
alert("happy"+i);
//subproduct.options[i].text = returnElements[i+1].split("|");
// document.forms[0]. productSubarea[i].value = returnElements[i+];
document.forms[0]. productSubarea[i].text = returnElements[i+1];
}
}
//}
//else{
//document.forms[0]. productSubarea.length = 1;
// document.forms[0]. productSubarea.value = "ALL";
// document.forms[0]. productSubarea.text = "ALL";

//}


}
}
else {
alert("Bad response by the server");
}



}

</script>
</head>

<tr>
<td height="12" style="text-align: right" width="229"><font face="Arial">Product Area :</td>
<td height="17"><html:select property="selectedProdAreas" name="CreateUserForm" multiple="true" styleId="productarea" onchange="return updateSubproductarea();" >
<html:optionsCollection property="prodAreas" value="productAreaId" label="productAreaName" />
</html:select></font>
</td>
</tr>
<tr>
<td height="12" style="text-align: right" width="229"><font face="Arial">Product SubArea :</td>

<td height="17"><html:select property="selectedSubProdAreas" name="CreateUserForm" multiple="true" styleId="productSubarea">
</html:select></font>
</td>
</tr>



In action class


private ActionForward subProductNames(ActionMapping mapping,
ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception, PersistenceException{

CreateUserForm userForm = (CreateUserForm)form;

Map prodSubAreas=new HashMap();
//String productSubName=new String();
String productSubName=null;
String optionSelected = request.getParameter("selectedProduct");
int productID=Integer.parseInt(optionSelected);

System.out.printf("UUUUUUUUUUUUUUUUUU"+optionSelected);
TCMSPersistenceManagerImpl impl = new TCMSPersistenceManagerImpl();
if(optionSelected!=null)
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");

prodSubAreas = impl.getProductSubAreaDetails(productID);
productSubName=makeOutputString(prodSubAreas);
System.out.println("*****************"+productSubName);
PrintWriter out = response.getWriter();
out.print(productSubName);
}

return null;
//return mapping.findForward( "subproduct" );

}

private String makeOutputString(Map prodSubAreas) {
String productSubName=new String();
Iterator productSubIterator = prodSubAreas.entrySet().iterator();
while(productSubIterator.hasNext()){
Map.Entry productSubEntry = (Map.Entry) productSubIterator.next();
productSubName = productSubName+"|"+(String) productSubEntry.getValue();

}


return productSubName;
}



But i am getting the problem is

I am attaching the bmp files for the output i am getting for 2 problems.
problem1.bmp and problem2.bmp

1.i am getting the value as undefined for last one with subproducts

2.i am unable to retreive the subproducts list if i selected multiple products



Pls Urgent. If u get any solution send the email to me

padmajap13@gmail.com

PLS HELP ME

IT`S URGENT