Inside Technique : Linking List Boxes
By Scott Isaacs

Most web pages that allow users to drill into categories use multiple round trips to the server. For example, in this site's Inside Techniques section, you start with a top-level list of categories. After you select a category, we go to the server and retrieve the set of sub-categories. Selecting from a sub-category goes back to the server to retrieve the next level of detail. In this article, we show you how to use multiple list boxes and JavaScript to create a cross-browser solution for small to medium size lists that does not require any extra round trips.

To demonstrate, try out the following two list boxes. For each type of food, you can get a list of items.

To make creating these list boxes easy, we authored a very simple framework. Once the framework is included on the page, creating the list is as simple as defining the set of elements. Below we show you how the above demonstration is created:

// Initialize the lists
function Init() {
  ClearList(document.forms.grocery.foods,0,25)
  ClearList(document.forms.grocery.items,0,25)
}

// Clear the list to ensure no cached values are displayed.
Init()

// This tries to be smart by clearing the list when the user
// leaves the page.
window.onunload = Init


// Define all the sets of options. The first argument represents the list box
// to populate and the 2nd argument represents the the width of the list box.
// We explain the purpose of the width later in this article.
var foods = new OptionList(document.forms.grocery.foods,25)
var fruits = new OptionList(document.forms.grocery.items,25)
var vegetables = new OptionList(document.forms.grocery.items,25)
var dairy= new OptionList(document.forms.grocery.items,25)

// The AddItem method is used to add items to a list
// The first argument is the value displayed
// THe second argument is the internal value (used if the form is submitted to the server)
// The last value is an optional argument. This argument specifies the 
// list to display if the item is selected. Look at the variable declarations
// above and you will see the fruits, vegetables, and dairy lists being defined.
foods.AddItem("Fruits","Fruit",fruits)
foods.AddItem("Vegetables","Vegetables",vegetables)
foods.AddItem("Dairy","Dairy",dairy)

// Fill in the list box with the value of foods. Remember, the list box being
// populated is defined when you created the list.
foods.Populate()

// Create the list of fruits, vegetables, and dairy items. 
fruits.AddItem("Apple","Apple")
fruits.AddItem("Banana","Banana")
fruits.AddItem("Grapefruit","Grapefruit")
fruits.AddItem("Orange","Orange")
fruits.AddItem("Peach","Peach")
fruits.AddItem("Plum","Plum")


vegetables.AddItem("Carrots","Carrots")
vegetables.AddItem("Celery","Celery")
vegetables.AddItem("Green Pepper","Green Pepper")
vegetables.AddItem("Tomato","Tomato")

dairy.AddItem("Butter","Butter")
dairy.AddItem("Eggs","Eggs")
dairy.AddItem("Milk","Milk")

In the beginning of the code, there is a width argument. When there are no items being displayed in a list, a blank item is created filled with spaces. This is necessary to work around how Netscape calculates the list boxes width. Netscape has a tendency to try and cache the last set of values in the list box. If the list box is empty, refreshing the page causes the width of the list box to collapse to a single character. By ensuring there is a long blank string, the width of the list box is always maintained.

Creating the actually set of linked lists is easy and this solution works with any number of list boxes. Just keep linking together additional lists by using the AddItem's third optional argument.

This shows you how the list is created. Next we take you through the framework and explain how these linked lists work.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.