Link to home
Start Free TrialLog in
Avatar of arun_dp
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
Avatar of Ixeus
Ixeus

you using ASP as well?
Avatar of fritz_the_blank
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.manufacturer.selectedIndex
var boxlength = 0

document.formname.models.selectedIndex = 0
for ( ctr=0;ctr<models[num].length;ctr++)
  {
  boxlength++;
  document.formname.models.options[ctr] = new Option(models[num] [ctr], models[num][ctr]);
  }

document.formname.models.length = boxlength;
document.formname.models.focus() ;

}


//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method=post id=form1 name=formname>
<SELECT id=select1 name=manufacturer onChange="JavaScript:FillList()">
<OPTION value=""></OPTION>
<OPTION value=Ford >Ford</OPTION>
<OPTION value=Toyota>Toyota</OPTION>

</SELECT>

<p>
<SELECT id=select2 name=models>
<OPTION></OPTION>
</SELECT>

</FORM>
</BODY>
</HTML>

ASKER CERTIFIED SOLUTION
Avatar of fritz_the_blank
fritz_the_blank
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial