Business Sites     

 Web Applications      Web Site Hosting      Search Engine     
CompanyWeb.net: Web Hosting, Internet Programming, Search Engine Optimization

 

 


   

CompanyWeb Articles

Book Reviews
Columns

Web-Source Topics...

Horse's Mouth
ProBizTips

CompanyWeb Search


 
Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.

Master Series

Dynamic Subordinate Listbox

By William Bontrager

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 /images.

The demonstration page, with example download links, is here. 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: 

     1. In the JavaSCript code, find the DoSomething() 
        function (found near the bottom of the code).

     2. 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;

     b. Remove the onChange="DoSomething(...) attribute 
        from the subordinate listbox's SELECT tag.


6. CGI Result:

To submit to a CGI program:

     1. 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">

     2. 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 /images of another -- it's so easy once a person knows how to do it :)

Will Bontrager


About the Author:
Copyright 2003 Bontrager Connection, LLC
William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Content Provided By:

 
More Master Series Articles...

 

 

Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.