Creating Cascading Combo boxes in ASP

I'd like to create "cascading" combo boxes on a webpage with ASP using VBScript.  By cascading I mean the second combo box depends on the value selected in the first, and the third combo box depends on the value selected in the second.  I connect to a Access 2002 database with ADO to populate the combo boxes.  The thing is, I'd like to do it without reloading the page each time a value is selected.  What's the easy way to do this?
Any help would be appreciated.
Thanks,

mv
LVL 11
Michael VasilevskySolutions ArchitectAsked:
Who is Participating?
 
SilversoftConnect With a Mentor Commented:
Hi

In order to create a cascading combobox, you will need some javascript for it.
You will need first extract the data from the database and store it in a javascript array.
I got a piece of javascript for cascading comboxes, it shoudl provide you some guideline to create your own cascading comboboxes. Just copy the code below into a HTML file to see the code in action.

Hope you find it useful :)

**********************************************************************


<html>
<head>
<script language="javascript">
var lists = new Array();

// First set of text and values
lists['Australia']    = new Array();
lists['Australia'][0] = new Array(
     'Sydney',
     'Brisbane'
);
lists['Australia'][1] = new Array(
     'Sydney',
     'Brisbane'
);

// Second set of text and values
lists['USA']    = new Array();
lists['USA'][0] = new Array(
     'New York',
     'Los Angeles'
);
lists['USA'][1] = new Array(
     'New York',
     'Los Angeles'
);

function changeList( box ) {
     list = lists[box.options[box.selectedIndex].value];
     emptyList( box.form.slave );
     fillList( box.form.slave, list );
}
function emptyList( box ) {
     while ( box.options.length ) box.options[0] = null;
}
function fillList( box, arr ) {
     for ( i = 0; i < arr[0].length; i++ ) {
          option = new Option( arr[0][i], arr[1][i] );
          box.options[box.length] = option;
     }
     box.selectedIndex=0;
}
</script>


</head>
<BODY onload="changeList(document.forms['drops'].master)">
<form name="drops" method="get" action="#">
<table border=0 bgcolor="#66CCFF">
<tr>
<td>Select a country </td>
<td><select name="master" size=1 onchange="changeList(this)">
<option value="Australia">Australia
<option value="USA">USA
</select>
</td>
</tr>
<tr>
<td>Now select a city </td>
<td>
<select name="slave" size=1>
<option>Netscape 4 width
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
0
 
Michael VasilevskySolutions ArchitectAuthor Commented:
That looks nice.  I don't know any javascript, so how would you populate the array with database values?  Also why:

lists['USA'][0] = new Array(
     'New York',
     'Los Angeles'
);
lists['USA'][1] = new Array(
     'New York',
     'Los Angeles'
);
?
Seems redundant to have to state the values twice.  
Finally, is there no vbscript solution?
Thanks,

mv
0
 
mrwebdevCommented:
Nice... Good Advice  SilverSoft!
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
markomniConnect With a Mentor Commented:
To populate the arrays, if you use an implementation similar to the one above, you can do something like this:

<script language="javascript">
...
lists['USA'][0] = new Array(
<%
  i = 0
  Do While Not o_rs.EOF
    If i > 0 Then
      Response.Write ", "
    End If
    Response.Write "'" & o_rs("City") & "'"
    i = i + 1
    o_rs.MoveNext
  Loop
%>
);
...
</script>

Of course, you will need to have your recordset o_rs opened and set to the first position you want in the array. The i counter variable is there just so the If...Then statment ensures that the comma appears between array elements, but not before the first element or after the last element.
0
 
SilversoftCommented:
Sorry forgot to comment, one array is the actula display text and the other is the value of the combo box.
Regarding VBscript, I wouldnt recommend VBscript as a client language as it only compatible with MS IE and none of the others, Javascript is more standard and more compatible.

*****************************************************************

// First set of text and values
lists['Australia']    = new Array();
//TEXT ARRAY
lists['Australia'][0] = new Array(
     'Sydney',
     'Brisbane'
);
//VALUE ARRAY
lists['Australia'][1] = new Array(
     'Sydney',
     'Brisbane'
);

// Second set of text and values
lists['USA']    = new Array();
//TEXT ARRAY
lists['USA'][0] = new Array(
     'New York',
     'Los Angeles'
);
//VALUE ARRAY
lists['USA'][1] = new Array(
     'New York',
     'Los Angeles'
);

*****************************************************************

If you would like to insert values from DB, you can do something like this:


lists['Australia'][0] = new Array(
<%
for counter = 1 to rs.recordcount
response.write rs("field1")
loop
%>

just some ideas....
 );
0
 
Michael VasilevskySolutions ArchitectAuthor Commented:
Looks good.  Just one more question then I'll close this out:  Is it true that I can only query the db with server-side scripting and therefore need to re-load the page each time the combo box is changed?  I'd like to avoid that if possible, but it doesn't seem do-able.
Thanks for all the help!

mv
0
 
markomniCommented:
I just found some JavaScript code that may be useful to you:

http://members.aol.com/grassblad/html/selCascade2.html
0
 
SilversoftCommented:
Hi mvasilevsky

You don't necessarily need to reload the page each time a new option is selected in the primary combobox. All you have to do is to preload all the options for the combobox all at once and store them in a javascript array like demostrated above. It may take a bit longer to preload all the options if you have thousands of options to load, but i think it will nevertheless avoid the page reload that is required when a new option is selected.

regards- :)
0
All Courses

From novice to tech pro — start learning today.