Dynamic Subordinate Dropdown Listbox
You've probably seen examples of dropdown listboxes on a page where the content of one listbox is changed whenever a different selection is made in another listbox.
This article and demonstration will show you how to do that -- without causing a web page reload whenever a new selection is made.
When the final selection is made by the user, you can have JavaScript do something and/or the information can be submitted to a CGI program. This article addresses both.
Some uses:
-
Select a state or province in the main listbox. The subordinate listbox then fills with names of cities in that state, province, or region.
-
Select a color. The subordinate listbox fills with related colors. (The demonstration page does this.)
-
Select a political party. The subordinate listbox fills with a list of those running for office.
-
Select a city. The subordinate listbox fills with store locations.
-
Select a question. The subordinate listbox fills with a list of possible answers to choose from.
Every time a new selection is made in the main listbox, the subordinate listbox changes its contents.
The demonstration page, with example download links, is listed in the demonstration index If you like what you see, read on for a few installation pointers.
1. The main listbox and/or the subordinate listbox can be a multi-select menu box by adding the MULTIPLE attribute. And more than one item can be shown at one time with the SIZE attribute. Here is an example:
<select
name="something"
size="3"
multiple>
...
</select>
2. The main listbox and the subordinate listbox can be part of a larger form -- subscription, feedback, registration, survey, shopping cart, any web page form to be processed with JavaScript or a CGI program.
3. Form and Listbox Names:
The form must have a name and the subordinate listbox must have a name. The JavaScript uses those names to fill the subordinate listbox with dynamic content. The main listbox name is optional in this case.
If your CGI program requires that the form or the subordinate listbox have certain specific names, or you just want to change the names from those in the demonstration, near the top of the JavaScript are settings where those names can be specified. You won't otherwise have to search and change the code.
4. Initial Listbox Size:
Some browsers won't make a listbox larger than it was when the page was first loaded, even if the content won't all fit. Therefore, make the "empty" subordinate list box in your HTML source code large enough so any of the dynamic content will fit.
This means, you'll need one line at least as long as the longest line of any of the dynamic content. And, you'll need the number of options that the deepest dynamic content would have.
Here is an "empty" listbox with five options:
<select>
<option value="">This represents the longest line.</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
5. JavaScript Result:
To do something with JavaScript when a selection is made in the subordinate listbox:
-
In the JavaSCript code, find the DoSomething() function (found near the bottom of the code).
-
Replace the entire body of the function with the code you want to run. Examples of what one might do with the function:
-
Provide an alert box with a "right" or "wrong" message in response to an answer selected.
-
Provide an alert box with the telephone number of the store selected.
-
Provide a popup box with the name of the opposing political candidate, along with shortcomings, when a political candidate is selected.
-
Redirect the browser to a page designed with the colors selected.
-
Pop up a map of the city or region selected.
If you do not want to run JavaScript when the second selection is made, you can either
-
a. Replace the entire body of the DoSomething() function with this line:
return;
-
Remove the onChange="DoSomething(...) attribute from the subordinate listbox's SELECT tag.
6. CGI Result:
To submit to a CGI program:
-
Put the CGI program's URL into the FORM tag with the ACTION attribute. If the CGI program requires that the POST method be specified, use the METHOD attribute to do that. Example:
<form
name="example"
method="POST"
action="/cgi-bin/script.cgi">
-
Give the form a submit button.
You would, of course, already have a CGI program installed to process the form results.
----------
Letting one list box change the contents of another -- it's so easy once a person knows how to do it :)
Will Bontrager
©2003 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
