Two selection lists can be paired to provide a hierarchical navigation on a site. The first selection list contains several categories; when a category is selected, the second list contains a set of elements in this category. From a JavaScript point of view, a list of elements must be maintained and the lists must be filled according to the selection in the first (category) list. So here is the list of links, in JSON format (see Chapter 11, "AJAX (and Related Topics)" for more information on this notation). var data = { "search" : [ {"title": "Google", "url": "http://www.google.com/"}, {"title": "MSN", "url":"http://search.msn.com/"} ], "browsers" : [ {"title": "Firefox", "url": "http://www.mozilla.com/firefox/"}, {"title": "Opera", "url": "http://www.opera.com/"} ] }; Then, the following code adds options to the second selection list, by using the Option constructor (syntax: first the caption, then the value): A Hierarchical Navigation (navigation.html; excerpt)
Figure 8.9 shows what happens when the first category (search engines) is selected: The second list fills with available options. Figure 8.9. Selecting an option in the first list fills the second list. |