The JavaScript Source: Forms : Category Form Script

Quality, Affordable Dental Plans from DentalPlans.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