The JavaScript Source: Forms : Category Form Script

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Once a main category is selected, a sub-category of that group is loaded for further selection. Great for different brands or subjects.

Departments

Department Users

Notes

Created by: Vladimir Geshanov
Posted: March 20, 2004

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: categoryForm.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Vladimir Geshanov |  */
var arrayData = new Array();
  arrayData[0]	= 'SALES|[SAL] User 01|'
  arrayData[1]	= 'SALES|[SAL] User 02|'
  arrayData[2]	= 'SALES|[SAL] User 03|'
  arrayData[3]	= 'MARKETING|[MAR] User 01|'
  arrayData[4]	= 'MARKETING|[MAR] User 02|'
  arrayData[5]	= 'MARKETING|[MAR] User 03|'
  arrayData[6]	= 'TECHNOLOGY|[TEC] User 01|'
  arrayData[7]	= 'TECHNOLOGY|[TEC] User 02|'
  arrayData[8]	= 'TECHNOLOGY|[TEC] User 03|'

function populateData( name ) {
	select	= window.document.form.SubCategory;
	string	= "";
		// 0 - will display the new options only
		// 1 - will display the first existing option plus the new options
	count	= 0;

		// Clear the old list (above element 0)
	select.options.length = count;

		// Place all matching categories into Options.
	for( i = 0; i < arrayData.length; i++ ) {
		string = arrayData[i].split( "|" );
		if( string[0] == name ) {
			select.options[count++] = new Option( string[1] );
		}
	}

// Set which option from subcategory is to be selected
//	select.options.selectedIndex = 2;
		// Give subcategory focus and select it
//	select.focus();
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="categoryForm.js"></script>

Body

Paste this code into the BODY section of your HTML document


<table cellpadding=4 cellspacing=0 border=0>
	<tr>
		<form name=form method=post action="">
		<td><span class=DefMenuText>Departments</span><br>
			<select name='category' size=3 style="width:120;"
				onChange='javascript:populateData( this.options[selectedIndex].text )'>
					<option>SALES</option>
					<option>MARKETING</option>
					<option>TECHNOLOGY</option>
			</select>
		</td>
		<td><span class=DefMenuText>Department Users</span><br>
			<select name="SubCategory" size=3 style="width:120;">
			</select>
		</td>
		</form>
	</tr>
</table>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

1. From: jon
how to edit?
11/03/2008 07:39:20

2. From: Lee (Admin)
11/06/2008 12:02:24

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

1. From: jonhow to edit?11/03/2008 07:39:20

2. From: Lee (Admin)11/06/2008 12:02:24

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: jon
how to edit?
11/03/2008 07:39:20

2. From: Lee (Admin)
11/06/2008 12:02:24