Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Creating Cascading Combo boxes in ASP

Posted on 2004-11-01
8
Medium Priority
?
573 Views
Last Modified: 2008-01-16
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
0
Comment
Question by:Michael Vasilevsky
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 2

Accepted Solution

by:
Silversoft earned 1200 total points
ID: 12466441
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
 
LVL 10

Author Comment

by:Michael Vasilevsky
ID: 12467134
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
 
LVL 6

Expert Comment

by:mrwebdev
ID: 12467153
Nice... Good Advice  SilverSoft!
0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 2

Assisted Solution

by:markomni
markomni earned 400 total points
ID: 12470340
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
 
LVL 2

Expert Comment

by:Silversoft
ID: 12470346
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
 
LVL 10

Author Comment

by:Michael Vasilevsky
ID: 12474894
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
 
LVL 2

Expert Comment

by:markomni
ID: 12479969
I just found some JavaScript code that may be useful to you:

http://members.aol.com/grassblad/html/selCascade2.html
0
 
LVL 2

Expert Comment

by:Silversoft
ID: 12480452
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question