arun_dp
asked on
Dependant Drop-down box
I have got two drop-down boxes. The first one will list all the states returnde from a query. Now, the second one should list only the cities of the state which is selected in First COmbo box. Hope, someone would answer my query
immediately
immediately
you using ASP as well?
Here is an example of the JavaScript side of the equation. I usually create the arrays programatically by iterating through the recordset and using Response.write to generate the JavaScript:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
// Populate an array with all of the models from the different
// manufactures in the order that the manufacturers appear in the
// drop-down list. In this example, I'll use Ford and Toyota
models = new Array(3)
models [0] = new Array(1)
models [1]= new Array(3)
models [2] = new Array(4)
//Empty (0)
models [0][0] = " "
//Ford (3)
models [1] [0] = "Tempo"
models [1] [1] = "Tauras"
models [1] [2] = "Windstar"
//Toyota (2)
models [2][0] = "Tercel"
models [2][1] = "Corolla"
models [2][2] = "Camry"
models [2][3] = "Avalon"
//======================== ========== ==========
//Next, we create a function to fill the second drop down from
//the array based on the item selected in the first drop down.
function FillList()
{
var num=document.formname.manu facturer.s electedInd ex
var boxlength = 0
document.formname.models.s electedInd ex = 0
for ( ctr=0;ctr<models[num].leng th;ctr++)
{
boxlength++;
document.formname.models.o ptions[ctr ] = new Option(models[num] [ctr], models[num][ctr]);
}
document.formname.models.l ength = boxlength;
document.formname.models.f ocus() ;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method=post id=form1 name=formname>
<SELECT id=select1 name=manufacturer onChange="JavaScript:FillL ist()">
<OPTION value=""></OPTION>
<OPTION value=Ford >Ford</OPTION>
<OPTION value=Toyota>Toyota</OPTIO N>
</SELECT>
<p>
<SELECT id=select2 name=models>
<OPTION></OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
// Populate an array with all of the models from the different
// manufactures in the order that the manufacturers appear in the
// drop-down list. In this example, I'll use Ford and Toyota
models = new Array(3)
models [0] = new Array(1)
models [1]= new Array(3)
models [2] = new Array(4)
//Empty (0)
models [0][0] = " "
//Ford (3)
models [1] [0] = "Tempo"
models [1] [1] = "Tauras"
models [1] [2] = "Windstar"
//Toyota (2)
models [2][0] = "Tercel"
models [2][1] = "Corolla"
models [2][2] = "Camry"
models [2][3] = "Avalon"
//========================
//Next, we create a function to fill the second drop down from
//the array based on the item selected in the first drop down.
function FillList()
{
var num=document.formname.manu
var boxlength = 0
document.formname.models.s
for ( ctr=0;ctr<models[num].leng
{
boxlength++;
document.formname.models.o
}
document.formname.models.l
document.formname.models.f
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method=post id=form1 name=formname>
<SELECT id=select1 name=manufacturer onChange="JavaScript:FillL
<OPTION value=""></OPTION>
<OPTION value=Ford >Ford</OPTION>
<OPTION value=Toyota>Toyota</OPTIO
</SELECT>
<p>
<SELECT id=select2 name=models>
<OPTION></OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.