Select Menu 3

# Feature:

- Turn a form select list into a multi-level select menus.
- Remember the last selected option.


# Browser support:

- IE, Netscape, Mozilla, FireFox, Opera, Safari


# Step-by-step

1. Compose the html page with form select lists as usual


2. Include the function script within the <HEAD> section of the page:

<script language="javascript" src="selectmenu3.js"></script>


3. Define the select menus in a JS file and include it under the function script:

<script language="javascript" src="menus3.js"></script>


4. Put the "initList()" calls in the BODY onload handler:

<body onload="initList(...)">


# Define a select menu:

1. Use the addList() call to define a select menu

2. Repeat the addItem() call to define option items for the select menu

3. Repeat the addSubList() call to define sub-list items for the select menu and group items into sub-lists

4. Use the addTopList() call to define the top-list for the select menu and group items into the top-list

5. Repeat 1-4 if have more than one select menu


# Syntax

addList(id, non_item_tag, sub_tag, back_tag)

... id: any unique number or string to register a select menu
... non_item_tag: options with this value are not "real" items, such as "Select a car" or "--------------"
... sub_tag: the script will use this value to indicate a sub-list option, other options should avoid having this value
... back_tag: clicking on options with this value will return to the top-list

for example: addList(1, "x", "sub", "back");


addItem(id, num, value, desc)

... id: id defined by addList(), to group this item into the given select menu
... num: number or string to identify this item in the select menu, should be unique in the given select menu
... value: option value
... desc: option text, if blank(""), will use value as text

for example: addItem(1, x, "", "---------------------------");


addSubList(id, num, idx, desc, item_list)

... id: id defined by addList(), to group this item into the given select menu
... num: number or string to identify this item in the select menu, should be unique in the given select menu
... idx: default selected index for the sub-list, start from 1
... desc: option text
... item_list: item nums and item ranges separated by commas, item range would two numbers separated by a colon

for example: addSubList(1, "Toyota", 7, "... more Toyota ...", "x, Honda, x, Ford, x, 1, 2, 55-60, 4, 5, 10-30, x")

Note: a sub-list can include other sub-list items


addTopList(id, idx, item_list)

... id: id defined by addList()
... idx: default selected index for top-list
... item_list: item nums and item ranges separated by commas


initList(id, select_list)

... id: defined by addList()
... select_list: the form select list

for example: initList(1, document.forms[0].cars)

Note: if you have more than one select menu, initList() should be called for each of them


checkList(id)

... returns true if a "real" item is selected for the given select menu, otherwise returns false


resetList(id)

... resets the select menu to top-list state


# Download

- sm.zip


# Copyright

- This script is free as long as the copyright notice remains intact in source code.