如何创建一个动态列表框（根据需求从数据库中读取相应的项）（1）？

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 aclearcase/" target="_blank" >ccess 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 borders (and hence the scrollbars), the single-pixel wide frame is not visible when loaded. The following listing shows the HTML for the page default.htm that creates the frameset:
<HTML>
<HEAD>
<TITLE>Selecting an Author</TITLE>
</HEAD>
<FRAMESET COLS="1,*">
   <FRAME NAME="getvalues" SRC="get_list.asp?field_name=state" FRAMEBORDER="0">
   <FRAME NAME="main" SRC="list_authors.htm" FRAMEBORDER="0">
</FRAMESET>
</HTML>
Notice that the main page in the right-hand window is the one that will contain the HTML list boxes, and it is an ordinary .htm page. We don‘’t need to use ASP here for our project, although you could use an ASP page here if you want to.
The HTML Controls
The next listing shows the HTML that creates the main list_authors.htm page. We‘’ve omitted the styling information and the script code section for the moment. You can see that the state and city list boxes have an ONCHANGE attribute that specifies a JavaScript function elsewhere in this page. They call this function and pass to it three values. These are the name of the field in the database containing the data to look up, the name of the current field in the database that this control holds data from, and the value of the currently selected option in this list box:
<FORM NAME="frmMain">
Select a State:
<SELECT SIZE="1" NAME="sel_state"
   ONCHANGE="getList(‘’city‘’, ‘’state‘’,
   this.options[this.selectedIndex].text)">
<OPTION>Loading, please wait ...</OPTION>
</SELECT>
<P>
Select a City:
<SELECT SIZE="1" NAME="sel_city"
        ONCHANGE="getList(‘’address‘’, ‘’city‘’, this.options[this.selectedIndex].text)">
<OPTION></OPTION>
</SELECT>
<P>
Select a Location:
<SELECT SIZE="1" NAME="sel_address">
<OPTION></OPTION>
</SELECT>

</FORM>
...
Therefore, if the user selects CA in the state list box, the values passed to the function are city, state, and CA. From these values, the data to fill the city list can be extracted from authors table in the pubs database using a SQL statement of the form:
SELECT DISTINCT city FROM authors WHERE state=‘’CA‘’
By using the DISTINCT keyword, we prevent duplicate values appearing, because there are likely to be several records for each city. Likewise, the ONCHANGE attribute of the city list box will allow us to create a SQL statement of the form:
SELECT DISTINCT address FROM authors WHERE city=‘’Oakland‘’
In this example, we should also specify the state as well, because the same city might appear in more than one state, but we‘’ve omitted this as it is designed to be a generic example of the technique for you to adapt to your own situation.
The Script in the Main Page
The getList function within the main page, which is called by the ONCHANGE event of the list boxes, is shown next. All it has to do is create a URL and query string combination that specifies the page we‘’ll use to get the appropriate data from the database. The page we抮e going to execute is named get_list.asp, and we append the values for the three parameters sent to this function to the URL:
...
<SCRIPT LANGUAGE="JavaScript">
<!--
function getList(strField, strMatch, strValue) {
  var strPageURL = ‘’get_list.asp?field_name=‘’ + strField + ‘’&match_field=‘’
                 + strMatch + ‘’&match_value=‘’ + strValue
  parent.frames[‘’getvalues‘’].location.href = strPageURL
}
//-->
</SCRIPT>
...
Once we‘’ve created the URL, the code (as shown above) just changes the href of the page in the hidden frame to this URL. This loads the get_list.asp page, which is then responsible for updating the appropriate list box content.

原文转自：http://www.ltesting.net