Inside Technique : Linking List Boxes : Extending the Framework

You now have enough information to go and build your own drill-down lists. However, there is one caveat you need to be aware of. The basis for the framework is its use of the onchange event to detect and update other lists. If you want your own operations to occur in addition to populating the additional lists each type a new selection takes place, you need to make sure you also call the lists onchange event handler and that you set the event handler up in script after you define the list. If you define the onchange event before defining the list, the framework will override your event handler. To demonstrate, we list the relevant code below with a demonstration on how to write your own onchange handler.

// Navigate to a particular URL
function goTo(src) {
  window.location = src
}


// The onchange event handler for the list. Everytime an option
// is selected, check if there is a child list to populate.
function OptionList_Change() {
 var el = this.options[this.selectedIndex]
 if (el.child) el.child.Populate()      
}


// The constructor for the option list
function OptionList(src,size) {
 src.OptionList = this
 this.src = src
 this.size = size
 this.onchange = this.src.onchange = OptionList_Change
 this.AddItem = OptionList_AddItem    
 this.items = new Array
 this.Populate = OptionList_Populate
}

// Define your lists...
var placeCategories = new OptionList(document.forms.destinations.categories,25)
var placeList = new OptionList(document.forms.destinations.places,25)

// Build List
placeCategories.AddItem("Language","Language/index.asp",LanguageList)
placeCategories.AddItem("Product","Product/index.asp",ProductList)
placeCategories.AddItem("Task","Task/index.asp",TaskList)
placeCategories.AddItem("Technology","Technology/index.asp",TechnologyList)
placeList.AddItem("JavaScript","Language/cat6")
placeList.AddItem("No Script","Language/cat18")
placeList.AddItem("VBScript","Language/cat7")

// Customize the onchange event handler
function doCatChange() {
  // Required - Call the framework's onchange event
  placeCategories.onchange()
  // Now write your own custom code
}

function doPlaceChange() {
  // Since this is the deepest list, no need to call the
  // framework's handler.

  // Navigate to the page specified by the value.
  if (this.selectedIndex>-1)
    goTo(this[this.selectedIndex].value)
}

document.forms.destinations.categories.onchange = doCatChange
document.forms.destinations.places.onchange = doPlaceChange
</SCRIPT>

On the last page, we provide a complete demonstration that helps you locate articles on the site.

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