Category Form Script

Vladimir Geshanov Mar 20, 2004

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://www.javascriptsource.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>

Leave a Response

(2 comments)

You would just need to change the data in the array, using the same format.

Lee Nov 6, 2008

brilliant script!![br /] But how is it possible to edit it, like to change the category to say a name of a person and then the sub category to state diffrent things like bio etc.[br /]thanks again..

jon Nov 3, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details