Just try this html. It has example of that. It works great.
<html>
<HEAD>
<TITLE>Proposal</TITLE>
</HEAD>
<LINK REL=stylesheet TYPE="text/css"
HREF="../css/siteWideStyleSheet.css">
<SCRIPT LANGUAGE="JavaScript" >
var arrId=new
Array("1|11~111*1111","1|12~555*5555","2|55~5551*5555","2|55~5552*5555")
;
var arrName=new
Array("amit|aa~aaaa*aaaab","amit|aa1~eeee*eeeeb","atul|ee1~eeee1*eeeeb1"
,"atul|ee1~eeee2*eeeeb2");
/***********************************************************************
**********************
* Creator: Vikas Aggarwal
* Client Shkun Global Networks
* Function Name :selectBuyer()
* Purpose :This function will works when buyer/seller select the agency
* Parameters : None
* Returns : None(void)
* Change History :
* Date Modified By Description
************************************************************************
**********************/
function selectBuyer()
{
var j=1;
var
sCid=document.search.agency[document.search.agency.selectedIndex].value;
//alert(sCid);
for(var x=1;x<document.search.buyer.length;x++)
{ document.search.buyer.options[x]=null;
}
for(i=0;i<arrId.length;i++)
{
var ArrayId=arrId[i];
var ArrayValue=arrName[i];
var lengthOfId=ArrayId.length;
var lengthOfValue=ArrayValue.length;
var agencyId=ArrayId.indexOf('|');
var agencyValue=ArrayValue.indexOf('|');
var buyerId=ArrayId.indexOf('~');
var buyerValue=ArrayValue.indexOf('~');
var clientID=ArrayId.indexOf('*');
var clientValue=ArrayValue.indexOf('*');
var cids=ArrayId.substring(0,agencyId);
//alert(cids);
var bNm=ArrayId.substring(agencyId+1,buyerId);
//alert(" bNm"+ bNm);
if(sCid == cids)
{ var flag=false;
for(var
x=0;x<document.search.buyer.length;x++)
{ if(bNm ==
document.search.buyer[x].value)
{
flag=true;
break;
}
}
if(!flag)
{ //alert("adding
"+ArrayValue.substring(0,ArrayValue));
var op = new
Option(ArrayValue.substring(agencyValue+1,buyerValue),ArrayId.substring(
agencyId+1,buyerId));
document.search.buyer.options[j++]=op;
}
}
}
document.search.buyer.options[0].selected=true;
}
/***********************************************************************
**********************
* Function Name :selectClient()
* Purpose :This function will works when buyer/seller select the
buyer
* Parameters : None
* Returns : None(void)
* Change History :
* Date Modified By Description
************************************************************************
**********************/
function selectClient()
{
var j=1;
var
sCid=document.search.buyer[document.search.buyer.selectedIndex].value;
//alert("sCid"+sCid);
for(var x=1;x<document.search.client.length;x++)
{ document.search.client.options[x]=null;
}
for(i=0;i<arrId.length;i++)
{
var ArrayId=arrId[i];
var ArrayValue=arrName[i];
var lengthOfId=ArrayId.length;
var lengthOfValue=ArrayValue.length;
var agencyId=ArrayId.indexOf('|');
var agencyValue=ArrayValue.indexOf('|');
var buyerId=ArrayId.indexOf('~');
var buyerValue=ArrayValue.indexOf('~');
var clientId=ArrayId.indexOf('*');
var clientValue=ArrayValue.indexOf('*');
var arrCids=ArrayId.substring(agencyId+1,buyerId);
var cNm = ArrayId.substring(buyerValue+1,clientValue);
if(sCid == arrCids)
{ var flag=false;
for(var
x=0;x<document.search.client.length;x++)
{ if(cNm ==
document.search.client[x].value)
{
flag=true;
break;
}
}
if(!flag)
{ //alert("adding
"+ArrayValue.substring(0,clientValue));
var op = new
Option(ArrayValue.substring(buyerValue+1,clientValue),ArrayId.substring(
buyerId+1,clientId));
document.search.client.options[j++]=op;
}
}
}
document.search.client.options[0].selected=true;
}
/***********************************************************************
**********************
* Function Name :selectProduct()
* Purpose :This function will works when buyer/seller select the
client
* Parameters : None
* Returns : None(void)
* Change History :
* Date Modified By Description
************************************************************************
**********************/
function selectProduct()
{
var j=1;
var
sCid=document.search.client[document.search.client.selectedIndex].value;
//alert("sCid"+sCid);
for(var x=1;x<document.search.product.length;x++)
{ document.search.product.options[x]=null;
}
for(i=0;i<arrId.length;i++)
{
var ArrayId=arrId[i];
var ArrayValue=arrName[i];
var lengthOfId=ArrayId.length;
var lengthOfValue=ArrayValue.length;
var agencyId=ArrayId.indexOf('|');
var agencyValue=ArrayValue.indexOf('|');
var buyerId=ArrayId.indexOf('~');
var buyerValue=ArrayValue.indexOf('~');
var clientId=ArrayId.indexOf('*');
var clientValue=ArrayValue.indexOf('*');
var arrCids=ArrayId.substring(buyerId+1,clientId);
var cNm =
ArrayId.substring(clientValue+1,lengthOfValue);
if(sCid == arrCids)
{ var flag=false;
for(var
x=0;x<document.search.client.length;x++)
{ if(cNm ==
document.search.client[x].value)
{
flag=true;
break;
}
}
if(!flag)
{ //alert("adding
"+ArrayValue.substring(0,clientValue));
var op = new
Option(ArrayValue.substring(clientValue+1,lengthOfValue),ArrayId.substri
ng(clientId+1,lengthOfId));
document.search.product.options[j++]=op;
}
}
}
document.search.product.options[0].selected=true;
}
/***********************************************************************
**********************
* Function Name :searchValidate()
* Purpose :This function will works when buyer/seller select the
Go button and it check
that all the dropdown should be
selected
* Parameters : None
* Returns : None(void)
* Change History :
* Date Modified By Description
************************************************************************
**********************/
function searchValidate(){
if((document.search.agency.options.selectedIndex == 0 )
| |(document.search.buyer.options.selectedIndex ==0 )
| |(document.search.client.options.selectedIndex== 0 )
| |(document.search.product.options.selectedIndex== 0 ))
{
alert("Please Choose a Agency,Buyer,Client and Product from
the Drop down");
return false;
}
else{
document.search.submit();
}
}
/***********************************************************************
**********************
* Function Name :showAgencyDown()
* Purpose :This function will works when this page will loaded
and it show all the agency
* Parameters : None
* Returns : None(void)
* Change History :
* Date Modified By Description
************************************************************************
**********************/
function showAgencyDown()
{
//alert("hi");
var ArrayId=arrId[0];
var ArrayValue=arrName[0];
var lengthOfId=ArrayId.length;
var lengthOfValue=ArrayValue.length;
var agencyId=ArrayId.indexOf('|');
var agencyValue=ArrayValue.indexOf('|');
var buyerID=ArrayId.indexOf('~');
var buyerValue=ArrayValue.indexOf('~');
var clientID=ArrayId.indexOf('*');
var clientValue=ArrayValue.indexOf('*')
//alert("to");
var op = new
Option(ArrayValue.substring(0,agencyValue),ArrayId.substring(0,agencyId)
);
//alert("CHGCGCGC"+document.search.agency.options[0].value);
document.search.agency.options[1]=op;
for(i=0;i<arrId.length;i++)
{ var ArrayId=arrId[i];
var ArrayValue=arrName[i];
var lengthOfId=ArrayId.length;
var lengthOfValue=ArrayValue.length;
var agencyId=ArrayId.indexOf('|');
var agencyValue=ArrayValue.indexOf('|');
var buyerID=ArrayId.indexOf('~');
var buyerValue=ArrayValue.indexOf('~');
var aNm=ArrayId.substring(0,agencyId);
//alert("aNm "+aNm);
var flag=false;
for(var x=0;x<document.search.agency.length;x++)
{
//alert(document.search.client[x].value);
if(aNm ==
document.search.agency[x].value)
{
flag=true;
break;
}
}
if(!flag)
{ //alert("adding
"+ArrayValue.substring(0,clientValue));
var op = new
Option(ArrayValue.substring(0,agencyValue),ArrayId.substring(0,agencyId)
);
document.search.agency.options[document.search.agency.length]=op;
}
}
}
</SCRIPT>
<STYLE TYPE="text/css">
#agencyLabelsDiv {position:relative;
top:0; left:0;}
#agency01Div {position:relative;
top:0; left:0;}
#proposal01Div {position:relative;
top:0; left:0; visibility:visible;}
#agency02Div {position:relative;
top:0; left:0;}
#keyDiv
{position:absolute; top:35; left:700;}
</STYLE>
<BODY BGCOLOR="#CCCCFF" LEFTMARGIN=9 TOPMARGIN=10
onLoad="showAgencyDown();">
<form name ="search" action ="/RequestManager.forword flag=8.3">
<!-- BEGIN TABLE FRAME -->
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 width="1000">
<TR> <TD COLSPAN=2 ROWSPAN=2><IMG
SRC="../images/seller/tlCorner.gif"></TD><TD HEIGHT=1
BGCOLOR="#CCCCCC"><IMG SRC="../images/transpix.gif"></TD><TD COLSPAN=2
ROWSPAN=2><IMG SRC="../images/seller/trCorner.gif"></TD></TR>
<TR> <TD HEIGHT=10 BGCOLOR="#FFFFFF"><IMG
SRC="../images/transpix.gif"></TD></TR>
<TR> <TD WIDTH=1 BGCOLOR="#CCCCCC"><IMG
SRC="../images/transpix.gif"></TD><TD WIDTH=8 BGCOLOR="#FFFFFF"><IMG
SRC="../images/transpix.gif"></TD><TD BGCOLOR="#FFFFFF">
<!-- START TABLE CONTENT -->
<TABLE CELLPADDING=3 CELLSPACING=0 BORDER=0 WIDTH=100%>
<TR BGCOLOR="CCCCCC"> <TD HEIGHT=1 COLSPAN=8><IMG
SRC="../images/transpix.gif"></TD></TR>
<TR BGCOLOR="#CCCCFF">
<TD CLASS="header2" WIDTH=60 HEIGHT=30 VALIGN="middle"
ALIGN="right">Agency:</TD>
<TD> <select name="agency" onChange="selectBuyer()">
<OPTION value = "Agency">Agency</OPTION>
</select></TD>
<TD CLASS="header2" VALIGN="middle" ALIGN="right">Buyer:</TD>
<TD><select name="buyer" onChange="selectClient()">
<OPTION value = "Buyer">Buyer</OPTION>
</select></TD>
<TD CLASS="header2" VALIGN="middle"
ALIGN="right">Client:</TD>
<TD><select name="client" onChange="selectProduct()">
<OPTION value = "Client">Client</OPTION>
</select></TD>
<TD CLASS="header2" VALIGN="middle"
ALIGN="right">Product:</TD>
<TD><select name="product">
<OPTION value = "Product">Product</OPTION>
</select></TD>
<td class="header2" VALIGN="middle" ALIGN="right"><font size="-1"><input
type="submit" value = "Go" onClick = "searchValidate()"></font></td>
</tr>
</TABLE>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 width="1000">
<TR BGCOLOR="CCCCCC"> <TD HEIGHT=0 COLSPAN=8></TD></TR>
<TR BGCOLOR="#CCCCFF">
<TD CLASS="header2" WIDTH=60 HEIGHT=30 VALIGN="middle"
ALIGN="right">Makegood</TD>
<TD><select name="makegood" onChange="selectMakegood()">
<OPTION value = "makegood">Makegood</OPTION>
</select></TD>
<td class="header2" VALIGN="middle" ALIGN="left"
width="800"><font size="-1"><input type="submit" value = "Discrepancy"
onClick = "searchValidate()"></font>
</tr>
</table>
</form>
</BODY>
</html>
------------------
Vikas Aggarwal
Technology Associate
Shakun Global Networks
(
http://www.vikinsa.com)