Based on Xin's great Chained Selects script, we modified it here to specifically act as a navigational menu. It includes a helper function that loops through the interdependant select lists, and if an "end selection" has been made, takes the user to that selection's value (aka URL). Also supports opening the URLs in a new window. You can use this script to create a multi-level form menu of any dimension.
Installation:To install Chained Select menu, refer to "sample.html". It contains a fully functional example of the script, from the HTML required to put on your page, to the two .js files that also need to be uploaded. Study the "config .js" file to customize the list contents. Documentation:"Chained Select Menu" is based almost entirely on the "Chained Selects" script, so the documentation for the later is applicable entirely here as well. Also see Important Note in the next section. A list group is like a folder tree. Imagine that you want to "chain" three select lists and you would prepare options for them. It's just like mapping a three-level folder tree to three select lists, the folders/items at top-level will populate the first select list, and when a top-level folder is selected, its sub-folders/sub-items will populate the second select list, and same goes for the third select list. To define a list group, Chained Selects introduces the following function calls:
The "first-list-name" is like the root of the folder tree, and the "list-group-name" will be referred to later when we are to bind form select lists to this list group. This is like adding a top-level folder to the folder tree. This option will populate the first select list binded to the list group. The "default-selected" parameter can be ignored. If supplied, it can be any value (1 would be handy). This is like adding a top-level item to the folder tree. This option will populate the first select list binded to the list group. The "default-selected" parameter can be ignored. If supplied, it can be any value. The "addList()" and "addOption()" will be re-used to define options for the second select list and the rest of select lists:
As you might notice, the first parameter in "addList()" and "addOption()" calls refer to some "list-name"s, the "addList()" calls also have a fourth parameter for names of nested sub-lists. These names should be unique. When you finish the definition of a list group, you can define another with the "addListGroup()" call again, followed by a bunch of "addList()" calls and "addOption()" calls. For any list (identified by a "list-name") in a list group, we could specify at most one item (could be a sub-list or an option in this list) with "default-selected" (if more than one item given the "default-selected" parameter, the last one will be taken), so that when this list is used to populate a form select list, the specified item will be selected by default. Once you have a list group, you can bind form select lists to it and populate the select lists with options defined in the list group. To do so, you can have:
The 'cookie_name' parameter is optional, if provided, will be used as the name prefix of the cookies to store the last selections and resume them for re-visits within the same browser session. If you implement a list group into more than one page with the same 'cookie_name' parameter, those pages can share the last selections within the same browser session. If different 'cookie_name' parameters are used, each page will be able to have its own copy of last selections. If you have more than one list group in a single page, you should have different 'cookie_name' parameters for each list group. If you want to re-use a list group for different sets of select lists in a single page, you can do so like this:
Usually the number of select lists should be equal to the number of maximum nested levels in a list group. For a selection that doesn't have sub-options for its "child" select list, its "child" select list and all the "grand-child" select lists will be emptied. When a select list is emptied, you can choose to just leave it there, to disable it or to hide it. To disable empty lists, you can embed the following line before the include line of the function script:
a disabled list will be enabled when there are some options to pupolate it. To hide empty lists, you can embed the following line before the include line of the function script:
a hidden list will become visible when there are some options to pupolate it. # Update History:
Important Note:It's important to understand how the script actually determines when a user's selection is an "end selection" (so to take the user to that value when the "Go" button is clicked), or simply a selection that leads to additional selection lists. The script does this by looping through the lists backwards, and examining the value of the selected item- if it contains a value (ie: "http://www.cnn.com"), the script assumes this is an "end selection", and takes the user to the page specified by this item's value. If the item doesn't contain a value (""), the script assumes this is parent list to something else, and continues scanning the remainder lists. What this means is that when customizing "config.js", ONLY give "end selection" items a value. All other items should have a blank value (""). This is demonstrated in the enclosed "config.js" file. |
Copyright 2004 Xin Yang & Dynamicdrive.com. Based on "Chained Selects" script.