创建|动态|数据|数据库Creating Dynamic List Boxes With Cross-Browser Compatibility
The aim of this article is to look at the opportunities for creating list boxes where the content changes dynamically depending on some action taken by the user in the page. Where you have a form that the visitor uses to provide information, this technique is often useful. The principle is that each list should change its content to match some condition specified in another list or control on the page.
The example we're using is that of selecting an address from a database, where the address is specified in separate fields for the state, city, and street address part. As the user selects a state from a list, the list of cities changes to reflect those in the chosen state. The same happens when the user then selects a city from that list, where the list of street addresses then shows only the ones in that city.
We'll look at some of the ways that this might be achieved and then implement the solution that seems to offer the best opportunity for general browser compatibility. We'll be using the sample pubs database that comes with all versions of SQL Server, but you can easily adapt the code to use your own data.
The Options Available
The core of the problem is how we are going to get a list of matching cities and street addresses for the selected state or city. There are several options for fetching and storing all the available data on the client, and using this cached data. Alternatively, we can implement a solution that fetches the required data each time a selection is made. This requires more connections to the server, but will probably transfer less data overall unless the user makes many different selections.
In Internet Explorer 4 or 5, we might consider:
Remote Data Services (RDS) ?fetch a recordset from a database using the RDS Data Control object, which is cached on the client. Then access it through the recordset property of the data control and use the information to populate the list boxes on demand by iterating through or filtering the recordset.
Tabular Data Control (TDC) ?fetch a text file containing the details from the server using the RDS Tabular Data Control object. Then access it through the recordset property of the data control and use the information to populate the list boxes on demand by iterating through or filtering the recordset.
XML Data Island ?fetch an XML document containing the information and cache it on the client. Then use the recordset property of the data杋sland to access the details and populate the list boxes on demand, in the same way as with RDS.
Create a hidden <IFRAME> element and load the information into it from the server, then copy it to the list boxes on demand.
In IE5, use the HttpRequest object to fetch an XML document from the server and access it using the XML Document Object Model (DOM) to extract the data and populate the list boxes.
In IE5, create a Hypertext Application (HTA) and use the FileSystemObject to store data on the client's disk, then use it to populate the list boxes on demand.
Use some kind of custom applet or ActiveX control to fetch the data on demand from the server using script code in the page, and then use the data to populate the list boxes.
Meanwhile, in Navigator 4.x or 6 we could:
Use a hidden <LAYER> element and load the information into it from the server, then copy it to the list boxes on demand.
Use some kind of custom applet to fetch the data on demand from the server using script code in the page, and then use the data to populate the list boxes.
However, for a Compatible Solution:
With the exception of a custom Java applet, none of these methods is compatible across a range of different browsers. One technique that should work, however, is the use of framesets. We could put each list box on a separate page in a separate frame, and reload that page on demand; using ASP to fill the list with the matching values.
An alternative approach would be to use a frameset in which one frame is not visible. We can then load this frame with a page containing the data we require each time we need to update the contents of any of the list boxes. Then all we have to do is copy the data into the appropriate list box. We'll look at this second solution first, as it seems to offer the best combination of usability and compatibility.
Creating a Hidden Frame
The first issue is how we are going to create a hidden frame within a frameset. If we set the frame width to zero, Navigator will fail to load the contents. This is probably a sensible action on Navigator's behalf, because the content won't be visible anyway. However, that doesn't help us. Instead, we create a frameset containing one frame that is one pixel wide, and another to fill the remainder of the browser window. By removing the frame bor