Download
Project Files
In certain situations, two or more
listboxes could contain related content based on a one-to-many relationship
i.e. one record in the parent listbox is directly related to multiple records
in the child listbox. While it is possible to have both listboxes display all
the available records, a more desireable setup would automatically filter the
contents of the child listbox based on a selection made in the parent listbox.
This article presents one way of implementing such a setup.
The example presented here involves
a table containing user records whereby each user belongs to a state. The users
and states tables can be found in the Internet example database that comes with
CodeCharge Studio. The aim of this exercise is to produce a search form that
contains a listbox for the states and another for the users. When a state is
selected in the first listbox, the contents of the second listbox will be updated
to display only the users belonging to the selected state.
The final solution consists
of three forms, two of which are standard grid and record forms for listing
the users and editing user records. The filter functionality is contained in
the search form which is composed on two dependent listboxes:
Notice that the search
form does not have a search button as is usually the case with search forms.
This is because the listboxes in the form have functionality to submit the selected
values without the user having to click the submit button.
The HTML <select>
tag which is used to create listboxes has an event called OnChange
which fires wherever the user changes the selection in the listbox. We will
use this event to reload the page and at the same time submit the value of the
record that has been selected in the listbox. To add the code, the On Change
client side event of the listbox is used as shown below:
Within this event, the following
code is used to reload the page and submit the selected state_id as a URL parameter:
//the 'this'
operator refers to the immediate control, in this case, the listbox which fired
the onChange event
window.location.href = "users.asp?state_id=" + this.value ;
//If you use a different language, change the extension
of the page to match the language extension e.g. .php, .cfm
With the above code in
place, whenever the user selects a new state, the state_id is submitted over
the URL and the child listbox containing the list of users uses this state_id
parameter to filter the records it displays. This is because the users listbox
has a input parameter defined to capture the state_id value that arrives over
the URL. This input parameter is defined in the List Data Source property
of the users listbox as shown below:
The state_id input parameter
is also used by the grid form that displays the list of users. In a similar
manner to the users listbox, the Data Source property of the grid form
defines as input parameter to capture the state_id input parameter as shown
below. The grid will therefore display only the user records corresponding to
the state that was selected:
Since we want the search
form to be completely automated, the listbox containing the list of users is
also modified so that whenever the user selects a user from the list, the listbox
automatically submits the users user_id over the URL. This submitted user_id
is then used by the grid and record forms to display the record for the selected
user. Again, the code to achieve this functionality is placed in the On
Change client side event of the users listbox:
window.location.href
= "users.asp?state_id=" + users_statesSearch.state_id.value + "&user_id="
+ this.value;
//If you use a different language, change the extension
of the page to match the language extension e.g. .php, .cfm
In the above code, notice that unlike
in the case of the state listbox, the users listbox submits two parameters not
one. The first parameter contains the state_id currently selected in the state
listbox while the second parameter contains the user_id that has just been selected
in the users listbox. It is necessary to send both parameters otherwise the
state listbox would have no way of recalling which state was selected before
the page was reloaded.
The line users_statesSearch.state_id.value
referrences the state_id
listbox which appears in the users_statesSearch
form. We do not use the
this operator because the event was fired from
the users listbox not the states listbox.
As a recap, upon making
a selection in the states listbox, the users listbox will be reloaded with the
users belonging to the selected state only. Then when a selection is made in
the users listbox, the grid and record forms will display the corresponding
user record.
Conclusion:
While it is possible to come up with other methods of achieving functionality
similar to that above, the use of JavaScript means that the same solution can
be applied regardless of the server side language that is used. In the case
where more than two listboxes are used, a similar approach could be used, bearing
in mind that each successive listbox would need to submit the values of the
previous listboxes in addition to submitting its value. |