Solved

Creating Cascading Combo boxes in ASP

Posted on 2004-11-01
558 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
Question by:mvasilevsky
    8 Comments
     
    LVL 2

    Accepted Solution

    by:
    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:mvasilevsky
    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
    Nice... Good Advice  SilverSoft!
    0
     
    LVL 2

    Assisted Solution

    by:markomni
    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
    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:mvasilevsky
    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
    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
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will learn how to count occurrences of each item in an array.

    856 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now