|
Turn a form select list into a two-level select menu. |
Over 2000+ free Javascript
at JavaScriptBank.com Website
# Feature:
- Turn a form select list into a two-level select menu.
# Browser support:
- IE4+, Netscape4x, Netscape6+, Opera5+, Konqueror3+
# 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="selectmenu.js"></script>
3. Define the select menus in a JS file and include it under the function script:
<script language="javascript" src="menus.js"></script>
4. Put the "initList()" in the BODY onload call:
<body onload="initList()">
5. Update the form select list with the "onchange" event:
<select name="list" onchange="updateList(id)">
... id: defined in a addList() call
# 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 addTopList() call to define option items and sub-list items in the top-list for the select menu
4. Repeat 1-3 if have more than one select menu
# Syntax
addList(id, form_name, select_name, 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
addItem(id, num, value, desc)
... id: id defined by addList(), to group this item into the given select menu
... num: to identify this option 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
addTopList(id, start, end, desc, idx)
... id: id defined by addList(), to group this item into the top-list of the select menu
... start, end: range of num, if start==end, it indicates a "real" item option, if start<end, it indicates a sub-list option
... desc: option text, can be blank ("") for "real" items
... idx: default index for the sub-list (starting from 1), or use 1 for a "real" item to indicate default selected (otherwise use 0 or just ignore)
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.