The get_list.ASP Page
The only remaining part of the task is to create the page get_list.ASP, which queries the database to get the matching list of values, and copies these values into the appropriate list box on the main page. The way we do this combines both client-side JavaScript and server-side ASP VBScript into one page.
Probably the simplest and most cross browser compatible way to cache information in a client-side page is through a JavaScript array. We can create this array using server-side ASP code, then read the contents of the array on the client using JavaScript. To see this more clearly, examine the code for the get_list.ASP page ?shown and described in the sections below.
Creating a JavaScript Array on the Server
The first part of the page creates a JavaScript SCRIPT section, and within it a function named copyOptions. The first line of this function declares a new array named arrOptions:
<%@LANGUAGE="VBScript"%>
...
You can see how this section of code creates the values in the list box by changing the length property of the options array to the appropriate size, and by assigning the values to the text property of each of the SELECT elements' options objects. The text property of an option element is the text that the user sees in the list.
The Client Side Page that is Created
When this page is viewed after loading into the browser, when ASP has worked its magic on it, it will look something like this:
Executing the copyOptions Function
Now we can finish off the page with the closing HEAD tag and the BODY section. Because we want the state list box to be populated when the page has loaded, we call the copyOptions function in the onload event of this page:
...
This works because when we loaded this page initially, as part of the frameset in default.htm, we specified the field name 'state' in the query string for this frame's SRC attribute:
...
...
The Final Result
The state list box has the value ' Loading, please wait... ' specified in the HTML code that creates it (in list_authors.htm). However, once the get_list.ASP page has executed on the server and loaded on the client, the state list is populated automatically:
After selecting a state, the city list box is populated automatically as the get_list.ASP page is reloaded:
We have what we want. Unfortunately, even though we've chosen the most generic route, things are not quite so simple. For example, if we load the page into Navigator 4.61 the lists are populated okay, but the list boxes fail to resize properly. Instead, you have to force the screen to redraw by resizing the browser window. You may like to experiment with whatever browsers you have to hand to see the effects with these.
A Multiple Frame Solution
So, it looks like the only really compatible solution is to use a separate frame for each list box (or even consider reloading the complete page each time from the server). This would work on non杝cript enabled browsers as well, and solves the problem of the resizing of the list boxes. For the multiple frame solution, all we need is a frameset containing a frame for each list box:
The get_state.ASP page will always contain a list of all the states; so can be created like this:
...
...
...
The get_city.ASP page can now show just the cities in this state using code very similar to that shown above for the get_state.ASP page, but with a different SQL statement:
...
'build up an appropriate SQL statement from the parameter values
strMatchValue = Request.QueryString("match_value")
strSQL = "SELECT DISTINCT city FROM authors WHERE state='" & _
strMatchValue & "' ORDER BY city"
...
Moreover, the same technique could be used to populate the ' address ' list box when the user selects an item in the ' city ' list box. Of course, this solution is nowhere near as smooth in operation as the first method we looked at. As they make each selection, the viewer will see the page containing the next list box reloading rather than the values just appearing as they did when we copied them into the existing list box. However, for maximum compatibility, you may choose to go down this route instead.
Conclusion
We have looked at the methods for dynamically populating a dropdown list box as a result of user selections, and chosen the method compatible with the greatest number of browsers. Depending upon the size of the database, however, using one of the cached options described near the top of the article may be a better solution.
Click here to download this article's support material.