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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SilversoftCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

markomniCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.