Selection-dependant input field

[nonshatter]

Hey guys,

I have a drop-down box which lists manufacturers of computer products. I want it so that when a user clicks "Other" from the drop-down box, a new input field appears below it which asks them to specify an alternative manufacturer.

<select name="cat" id="cat" onchange="setCategories();">
					<option value="components">Components</option>
					<option value="pcs">Desktop Computers</option>
					<option value="laptops">Laptops/Netbooks</option>
					<option value="monitors">Monitors</option>
					<option value="drives">Internal Drives</option>
					<option value="network">Cables/Networking</option>
					<option value="servers">Servers</option>
					<option value="software">Software</option>
					<option value="accessories">Other/Accessories</option></select>

<select name="manufacturer" id="manufacturer">
					 <option value="man">--Manufacturer--</option>
                                         <option value="dell">Dell</option>
                                         <option value="ibm">IBM</option>
                                         <option value="other">Other</option>
</select>

<!-- MAKE INPUT FIELD APPEAR HERE AFTER "OTHER" SELECTION -->

I know it is to do with the "onchange" attribute of the manufacturer input field, but I am new to JavaScript and don't know what code is required for the function to do this. Can anyone point me in the right direction?

Thanks in advance!

[Taywin]

You could accomplish by assigning style sheet to it in order to show & hide. Because IE use 'visibility' in the inline style while FF and others use 'display', using class instead would eliminate the problem (FF accepts 'visibility' in the class but not inline. The codes below are 2 parts - javascript & style sheet and HTML. Your HTML needs to add 'class' to the second selection. The script should do what you want.

Javascript & Style sheet

<script type="text/javascript">
function setCategories() {
  var selElem = document.getElementById("cat")
  if (selElem.options[selElem.selectedIndex].value=="accessories") {
    document.getElementById("manufacturer").className = "showSel"  // display
  }
  else {
    document.getElementById("manufacturer").className = "hideSel"  // hide it
  }
}
</script>

<style type="text/css">
.showSel {
  visibility: visible;
}
.hideSel {
  visibility: hidden;
}
</style>

HTML

<select name="cat" id="cat" onchange="setCategories();">
					<option value="components">Components</option>
					<option value="pcs">Desktop Computers</option>
					<option value="laptops">Laptops/Netbooks</option>
					<option value="monitors">Monitors</option>
					<option value="drives">Internal Drives</option>
					<option value="network">Cables/Networking</option>
					<option value="servers">Servers</option>
					<option value="software">Software</option>
					<option value="accessories">Other/Accessories</option></select>

<select name="manufacturer" id="manufacturer" class="hideSel">
					 <option value="man">--Manufacturer--</option>
                                         <option value="dell">Dell</option>
                                         <option value="ibm">IBM</option>
                                         <option value="other">Other</option>
</select>

[Airshow]

nonShatter,

function setManufacturer(menu) {
	var field = menu.form.other_manufacturer;
	field.style.display = ( menu[menu.selectedIndex].value == 'other' ) ? 'inline' : 'none';
}

<select name="manufacturer" id="manufacturer" onchange="setManufacturer(this);">
	<option value="man">--Manufacturer--</option>
	<option value="dell">Dell</option>
	<option value="ibm">IBM</option>
	<option value="other">Other</option>
</select>

<input type="text" name="other_manufacturer" size="35" value="" style="display:none;">

Airshow

[nonshatter]

Thanks for your replies. In my original post, I described the manufacturer drop-down box as having "value" attributes to make the code easier to understand.

However, the manufacturers are actually being automatically generated by the user's previous selection of "category". For example, if a user selects "Software" from "category" drop-down box, then the "manufacturer" drop-down box is populated with "UBIsoft", "EA", "Other" etc. Whereas if they select "Drives" then the "manufacturer" drop-down box is populated with "Seagate", "Sandisk" etc.... The form actually looks like this and the setManufacturer function takes care of populating the manufacturer field with options:

<select name="manufacturer" id="manufacturer" onchange="setManufacturer(this);">
					 <option value="">--Manufacturer--</option>
</select>

So when the drop-down box is populated with the manufacturer options, there are no "value" attributes being set for each option.

So essentially, my question now is how could I change this line of code to select an "option" rather than a "value":

field.style.display = ( menu[menu.selectedIndex].value == 'Other' ) ? 'inline' : 'none';

Again, thanks for your quick replies and let me know if you need to see more code :D

[nonshatter]

Sorry for being a pain. There was a really simple solution!

field.style.display = ( menu[menu.selectedIndex].text == 'Other' ) ? 'inline' : 'none';

I needed .text instead of .value

Thanks

[Airshow]

Nonshatter,

I needed .text instead of .value

You can do that if it works but your options need values if the form is to be submitted for interpretation server-side.

On submission, a select menu becomes a name|value pair in the Post/Get part of the HTTP request (depending on the method specified in the form tag). The value of the name|value pair is the value of the currently selected option.

So, if your form is designed to be submitted, you must devise a way to build each select menu's options with unique value attributes.

Airshow

[nonshatter]

Airshow,

Thankyou for your contributions! I completely over-looked the fields not having values attached to them. Here is my code for the generation of drop-down box options:

<html>
<head>
<script type="text/javascript">

//CATEGORIES / TYPES OF PRODUCT
var categories = new Array();

categories['categories'] = new Array('--Sub-Category--');
categories['components'] = new Array('Processors','Motherboards','Memory','Graphics Cards','Sound Cards','Cooling','Mice & Keyboards','Speakers');
categories['pcs'] = new Array('< 1.7GHz','1.8GHz > 2.2GHz','2.3GHz > 2.9GHz','2.9GHz >');
categories['laptops'] = new Array('Laptops','Netbooks','Laptop Accessories');
categories['monitors'] = new Array('< 19"','20" > 23"','24" >');
categories['drives'] = new Array('External HDs','Internal HDs','Optical Drives','Floppy Drives');
categories['network'] = new Array('Wireless Cards','Routers','Power Supplies/Cables');
categories['servers'] = new Array('Rackmount Servers','Tower Servers');
categories['software'] = new Array('Games/Entertainment/Education','Photo/Graphics','Business/Office','Other');
categories['accessories'] = new Array('Web Cams','Flash/USBs','Other');

//SUBCATEGORIES / MANUFACTURERS
var subcategories = new Array();

subcategories['components'] = new Array();
subcategories['components']['Processors']     = new Array('AMD','Intel','Other');
subcategories['components']['Motherboards']   = new Array('Abit','AOpen','Asus','Dell','DFI','Gigabyte','HP','Intel','MSI','Shuttle','Other');
subcategories['components']['Memory']         = new Array('Corsair','G.Skill','Kingston','OCZ','Sandisk','Vastech','Other');
subcategories['components']['Graphics Cards'] = new Array('Asus','ATI','GeForce','Gigabyte','HighTech','Radeon','XFS','Other');
subcategories['components']['Sound Cards']    = new Array('Asus','Creative Labs','Other');
subcategories['components']['Cooling']        = new Array('AcoustiFan','Generic','Noiseblocker','Sandisk','Vasth','Other');
subcategories['components']['Mice & Keyboards'] = new Array('Logitech','Microsoft','Vatech','Other');
subcategories['components']['Speakers']       = new Array('Acoustic Energy','Creative Labs','Hercules','Logitech','Other');

subcategories['pcs'] = new Array();
subcategories['pcs']['< 1.7GHz'] = new Array('Accer','Dell','Emachines','Gateway','HP','Mac','Custom/Other');
subcategories['pcs']['1.8GHz > 2.2GHz']  = new Array('Acer','Dell','Emachines','Gateway','HP','Mac','Custom/Other');
subcategories['pcs']['2.3GHz > 2.9GHz']  = new Array('Acer','Dell','Emachines','Gateway','HP','Mac','Custom/Other');
subcategories['pcs']['2.9GHz >'] = new Array('Acer','Dell','Emachines','Gateway','HP','Mac','Custom/Other');

//REST OF SUB-CATEGORIES/MANUFACTURERS GO HERE

function setCategories() {

	ctgSel = document.getElementById('cat');
	subctgSel = document.getElementById('subcategories');

	ctgList = categories[ctgSel.value];

	changeSelect(subctgSel, ctgList);
	setSubs();
}

function setSubs() {

	ctgSel = document.getElementById('cat');
	subctgSel = document.getElementById('subcategories');
	manSel = document.getElementById('manufacturer');

	subList = subcategories[ctgSel.value][subctgSel.value];
	
	changeSelect(manSel, subList);
}

function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  for (i in valuesAry) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }
}

function setManufacturer(menu) {
	var field = menu.form.other_manufacturer;
	field.style.display = ( menu[menu.selectedIndex].text == 'Other' | 'Custom/Other' ) ? 'inline' : 'text';
}

</script>
</head>



<body onload="setCategories();">

<td>Category:</td>
				<td><select name="cat" id="cat" onchange="setCategories();">
					<option value="categories">--Category--</option>
					<option value="components">Components</option>
					<option value="pcs">Desktop Computers</option>
					<option value="laptops">Laptops/Netbooks</option>
					<option value="monitors">Monitors</option>
					<option value="drives">Internal Drives</option>
					<option value="network">Cables/Networking</option>
					<option value="servers">Servers</option>
					<option value="software">Software</option>
					<option value="accessories">Other/Accessories</option>
				</select></td>
			</tr>
			<tr>
				<td>Sub-Category:</td>
				<td><select name="subcategories" id="subcategories" onchange="setSubs();">
					 <option value="">--Sub-category--</option></select></td>
			</tr>	
			<tr>
				<td>Manufacturer:</td>
				<td><select name="manufacturer" id="manufacturer" onchange="setManufacturer(this);">
					 <option value="">--Manufacturer--</option></select>
					 <input type="text" name="other_manufacturer" id="other_manufacturer" maxlength="10" size="10" onfocus="if(this.value==this.defaultValue){this.value='';}" value="Specify" style="display:none;"></td>					 
			</tr>

</html>

So, would it be possible to alter this so that unique values are attached to each option?

Thanks again,
Nonshatter

[Airshow]

Nonshatter,

So, would it be possible to alter this so that unique values are attached to each option?

Indeed it would.

Typically, your unique values will be database keys (or some obfuscating transform thereof), such that when the form (or AJAX request) is submitted, you can compose a relevant sql query server-side, eg to get detailed product data or put a selected item into a shopping basket.

In the demo below you will see that I have simply given all menu items the value 999 to save myself the trouble of having to be being inventive.

You will also see that there's just one menu building/handling function, which is implemented as a method of Array.prototype and includes a recursive call (actually in an inner event handler), thus allowing any number of levels of menu to be built, as determined by the data.

This is a fairly advanced programming. I think you will like the result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
</style>

<script type="text/javascript">
var menuData = {name:"Menu", sub:[
	{name:'-- Select a Category --', uid:'' },
	{name:'Components', uid:999, src:'x.jpg', sub:[
		{name:'-- Select a Component --', uid:'' },
		{name:'Processors', uid:999, src:'x.jpg', sub:[
			{name:'-- Select a Processor --', uid:'' },
			{name:'AMD', uid:999, src:'x.jpg' },
			{name:'Intel', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]},
		{name:'Motherboards', src:'x.jpg', sub:[
			{name:'-- Select a Motherboard --', uid:'' },
			{name:'Abit', uid:999, src:'x.jpg' },
			{name:'AOpen', uid:999, src:'x.jpg' },
			{name:'Asus', uid:999, src:'x.jpg' },
			{name:'Dell', uid:999, src:'x.jpg' },
			{name:'DFI', uid:999, src:'x.jpg' },
			{name:'Gigabyte', uid:999, src:'x.jpg' },
			{name:'HP', uid:999, src:'x.jpg' },
			{name:'Intel', uid:999, src:'x.jpg' },
			{name:'MSI', uid:999, src:'x.jpg' },
			{name:'Shuttle', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]},
		{name:'Memory', src:'x.jpg', sub:[
			{name:'-- Select Memory --', uid:'' },
			{name:'Corsair', uid:999, src:'x.jpg' },
			{name:'G.Skill', uid:999, src:'x.jpg' },
			{name:'Kingston', uid:999, src:'x.jpg' },
			{name:'OCZ', uid:999, src:'x.jpg' },
			{name:'Sandisk', uid:999, src:'x.jpg' },
			{name:'Vastech', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]},
		{name:'Graphics Cards', src:'x.jpg', sub:[
			{name:'-- Select a Graphics Card --', uid:'' },
			{name:'Asus', uid:999, src:'x.jpg' },
			{name:'ATI', uid:999, src:'x.jpg' },
			{name:'GeForce', uid:999, src:'x.jpg' },
			{name:'Gigabyte', uid:999, src:'x.jpg' },
			{name:'HighTech', uid:999, src:'x.jpg' },
			{name:'Radeon', uid:999, src:'x.jpg' },
			{name:'XFS', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]},
		{name:'Sound Cards', src:'x.jpg', sub:[
			{name:'-- Select a Sound Card --', uid:'' },
			{name:'Asus', uid:999, src:'x.jpg' },
			{name:'Creative Labs', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]},
		{name:'Cooling', src:'x.jpg', sub:[
			{name:'-- Select Cooling Device --', uid:'' },
			{name:'AcoustiFan', uid:999, src:'x.jpg' },
			{name:'Generic', uid:999, src:'x.jpg' },
			{name:'Noiseblocker', uid:999, src:'x.jpg' },
			{name:'Sandisk', uid:999, src:'x.jpg' },
			{name:'Vasth', uid:999, src:'x.jpg' },
			{name:'Other',  uid:999, src:'x.jpg' }
		]},
		{name:'Mice & Keyboards', src:'x.jpg', sub:[
			{name:'-- Select Mouse/Keyboard --', uid:'' },
			{name:'Logitech', uid:999, src:'x.jpg' },
			{name:'Microsoft', uid:999, src:'x.jpg' },
			{name:'Vatech', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]},
		{name:'Speakers', src:'x.jpg', sub:[
			{name:'-- Select Speaker --', uid:'' },
			{name:'Acoustic Energy', uid:999, src:'x.jpg' },
			{name:'Creative Labs', uid:999, src:'x.jpg' },
			{name:'Hercules', uid:999, src:'x.jpg' },
			{name:'Logitech', uid:999, src:'x.jpg' },
			{name:'Other', uid:999, src:'x.jpg' }
		]}
	]},
	{name:'PCs', uid:999, src:'x.jpg', sub:[
		{name:'-- Select PC Processor Speed --', uid:'' },
		{name:'< 1.7GHz', uid:999, src:'x.jpg', sub:[
			{name:'-- Select a PC Brand --', uid:'' },
			{name:'Accer', uid:999, src:'x.jpg' },
			{name:'Dell', uid:999, src:'x.jpg' },
			{name:'Emachines', uid:999, src:'x.jpg' },
			{name:'Gateway', uid:999, src:'x.jpg' },
			{name:'HP', uid:999, src:'x.jpg' },
			{name:'Mac', uid:999, src:'x.jpg' },
			{name:'Custom/Other', uid:999, src:'x.jpg' }
		]},
		{name:'1.8GHz > 2.2GHz', uid:999, src:'x.jpg', sub:[
			{name:'-- Select a PC Brand --', uid:'' },
			{name:'Accer', uid:999, src:'x.jpg' },
			{name:'Dell', uid:999, src:'x.jpg' },
			{name:'Emachines', uid:999, src:'x.jpg' },
			{name:'Gateway', uid:999, src:'x.jpg' },
			{name:'HP', uid:999, src:'x.jpg' },
			{name:'Mac', uid:999, src:'x.jpg' },
			{name:'Custom/Other', uid:999, src:'x.jpg' }
		]},
		{name:'2.3GHz > 2.9GHz', uid:999, src:'x.jpg', sub:[
			{name:'-- Select a PC Brand --', uid:'' },
			{name:'Accer', uid:999, src:'x.jpg' },
			{name:'Dell', uid:999, src:'x.jpg' },
			{name:'Emachines', uid:999, src:'x.jpg' },
			{name:'Gateway', uid:999, src:'x.jpg' },
			{name:'HP', uid:999, src:'x.jpg' },
			{name:'Mac', uid:999, src:'x.jpg' },
			{name:'Custom/Other', uid:999, src:'x.jpg' }
		]},
		{name:'2.9GHz >', uid:999, src:'x.jpg', sub:[
			{name:'-- Select a PC Brand --', uid:'' },
			{name:'Accer', uid:999, src:'x.jpg' },
			{name:'Dell', uid:999, src:'x.jpg' },
			{name:'Emachines', uid:999, src:'x.jpg' },
			{name:'Gateway', uid:999, src:'x.jpg' },
			{name:'HP', uid:999, src:'x.jpg' },
			{name:'Mac', uid:999, src:'x.jpg' },
			{name:'Custom/Other', uid:999, src:'x.jpg' }
		]}
	]},
	{name:'laptops', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Laptop category --', uid:'' }
	]},
	{name:'monitors', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Monitor category --', uid:'' }
	]},
	{name:'drives', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Driver category --', uid:'' }
	]},
	{name:'network', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Network Device category --', uid:'' }
	]},
	{name:'servers', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Server category --', uid:'' }
	]},
	{name:'software', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Software category --', uid:'' }
	]},
	{name:'accessories', uid:999, src:'x.jpg', sub:[
		{name:'-- Select Accessory category --', uid:'' }
	]}
]};

Array.prototype.buildCascadingMenu = function(container, dir) {
	//Build a select menu, insert into container and create a subordinate container for next menu(s) in cascade.
	dir = (!dir) ? 'v': dir;
	var i, opt;
	var sel = document.createElement('select');
	container.innerHTML = '';//clears designated container and all subordinate containers and their menus.
	container.appendChild(sel);
	for(i=0; i<this.length; i++) {
		opt = document.createElement('option');
		sel.appendChild(opt);
		opt.innerHTML = this[i].name;
		opt.value = this[i].uid;
		opt.src = this[i].src;
		opt.subordinateMenuData = this[i].sub;
	}
	//Create a new, empty, nested container for next element in cascade.
	if(dir == 'h') { sel.subordinate_container = document.createElement('span'); }//horizontal presentation
	else { sel.subordinate_container = document.createElement('div'); }//vertical presentation (default)
	container.appendChild(sel.subordinate_container);
	sel.onchange = function() {//the menu's onchange handler
		//Create subordinate menu from selected item's sub array and insert in subordinate_container.
		var selOption = this[this.selectedIndex];
		if(selOption.subordinateMenuData) {
			selOption.subordinateMenuData.buildCascadingMenu(this.subordinate_container, dir);//recursive call (by proxy)
		}
		else { //We've reached the end of the branch - no subordinate menu.
			if(selOption.value){
				sel.subordinate_container.innerHTML = [selOption.innerHTML,selOption.value,selOption.src].join(' : ');//dummy statement to demonstrate that we can recall/display the raw data correctly.
			}
			else{
				sel.subordinate_container.innerHTML = '';//In case use reselects the "-- Select a category --" option
 			}
		}
	};
};

onload = function(){
	menuData.sub.buildCascadingMenu(document.getElementById('menuCascade'), 'v');
}
</script>
</head>

<body>

<div id="menuCascade"></div>

</body>
</html>

NOTES:

• New arrays are created within square brackets []
• New objects are created within curly braces {}
• Hence in menuData we have a nested structure comprising an object containing an array of objects each (optionally) containing an array of objects etc. Objects represent menu items and the arrays contain subordinate menus/submenus.
• Data (name, uid image file name) are included in every item. More (or less) data can be included as required.
• Typically menuData will be written server-side from data retreived from a relational database of categories/ subcategories/subsub... etc. and finally products.
• Array.prototype.buildCascadingMenu progressively probes menuData to build select menus.
• See comments in code for more detail.

Airshow

[nonshatter]

Airshow,

you are a true gentleman! I will have my work cut out for today, and I will let you know my outcome later.

Once again thank you!
nonshatter

[nonshatter]

Airshow

I appreciate your help, but I was far more comfortable with the html select fields hardcoded as they were before as that seemed more logical to me.

As good as the code you suggested is, I still can't seem to implement the values properly as it is quite advanced! I understand the array of objects... The "uid" is an integer number, is that the value attribute of the selected option? Is it possible to change the integer number to just be a plain and simple value E.g. instead of being '123' make it 'intel'? And also the src part is not needed.

Surely there must be an easier way to add values (whilst keeping it as simple as possible)!?

I just came across this which is sort of similar to what I need http://www.javascriptkit.com/javatutors/selectcontent2.shtml By using the | to separate the name/value attributes. Would this be sufficient?

Thanks

[Airshow]

I appreciate your help, but I was far more comfortable with the html select fields hardcoded as they were before as that seemed more logical to me.

The advantage of composing the select menus dynamically is that you can have as many levels as you like. The whole thing is data driven. Dynamic creation of DOM elements is pretty well a way of life these days amongst web programmers.

As good as the code you suggested is, I still can't seem to implement the values properly as it is quite advanced! I understand the array of objects... The "uid" is an integer number, is that the value attribute of the selected option? Is it possible to change the integer number to just be a plain and simple value E.g. instead of being '123' make it 'intel'? And also the src part is not needed.

Uids are indeed used as option values. I used integers on the assumption that your aplication would be hooked up server-side to a database. If strings such as 'intel' work better for you then by all means use them - they are not germain to making the menu cascade work. You can delete all the src attributes. I put them in to demonstrate how other data can be included.

Surely there must be an easier way to add values (whilst keeping it as simple as possible)!?

The data structure I suggest is about as simple as it can be. There's no fat in there. If you do something different then you're into rewriting Array.prototype.buildCascadingMenu to keep up with your changes, or reverting to a plethora of functions to handle each level separately.

I just came across this which is sort of similar to what I need http://www.javascriptkit.com/javatutors/selectcontent2.shtml By using the | to separate the name/value attributes. Would this be sufficient?

To my mind, that's more complex because you have to split strings to obtain individual values, whereas with Javacript {Objects} you have immediate access to properties by name - no messing. Moreover, the data structure in that example has no concept of nested elements, hence no tree structure. If you were to build it up to accommodate your requirements, then you would end up with something not dissimilar to what I have already coded for you.

Airshow

[nonshatter]

Okay. Sorry for being a pain but is there a way of getting this to work? I just want something I can understand more easily. I can always implement something more advanced later on when I fully understand JavaScript (hopefully that will happen one day).

<form name="sellform">
		<select name="cat" size="7" onChange="updatecat(this.selectedIndex)" style="width: 200px">
			<option value="">-- Select a Category --</option>
			<option value="components">Components</option>
			<option value="pcs">Desktop Computers</option>
			<option value="laptops">Laptops/Netbooks</option>
			<option value="monitors">Monitors</option>
			<option value="drives">Internal Drives</option>
			<option value="network">Cables/Networking</option>
			<option value="servers">Servers</option>
			<option value="software">Software</option>
			<option value="accessories">Accessories</option>
		</select>

<select name="subcat" size="7" style="width:200px">
</select>

<select name="manufacturer" size="7" style="width:200px">
</select>
</form>

<script type="text/javascript">

var subcat = new Array()

subcat[0] = ""
subcat[1] = ['Processors|processor','Motherboards|motherboard','Memory|memory','Graphics Cards|graphic','Sound Cards|sound','Fans|fan','Mice & Keyboards|mice_keyboard','Speakers|speaker']
subcat[2] = ['< 1.7GHz|lowest','1.8GHz > 2.2GHz|low','2.3GHz > 2.9GHz|med','2.9GHz >|high']
subcat[3] = ['Laptops','Netbooks','Laptop Accessories']
subcat[4] = ['< 19"','20" > 23"','24" >']
subcat[5] = ['External HDs','Internal HDs','Optical Drives','Floppy Drives']
subcat[6] = ['Wireless Cards','Routers','Power Supplies','Other Cables']
subcat[7] = ['Rackmount Servers','Tower Servers']
subcat[8] = ['Games/Entertainment','Photo/Graphics','Business/Office','Family/Education','Other Software']
subcat[9] = ['Web Cams','Flash/USBs','Cases','Bags','Other Accessories']

//HOW DO I CONSTRUCT THIS ARRAY
/*var manufacturer = new Array()

manufacturer[1][1] = ['Intel|intel', 'AMD|amd']
manufacturer[1][2] = ['AS Rock|asrock','Asus|asus']
manufacturer[1][3] = ['Sandisk|sandisk','Vastech|vastech']
*/

var catlist=document.sellform.cat
var subcatlist=document.sellform.subcat

function updatecat(selectedcatgroup) {
	subcatlist.options.length=0
	if (selectedcatgroup > 0) {
		for (i=0; i < subcat[selectedcatgroup].length; i++)
		subcatlist.options[subcatlist.options.length] = new Option(subcat[selectedcatgroup][i].split("|")[0], subcat[selectedcatgroup][i].split("|")[1])
	}
}

</script>

The first two input fields work fine. It's just adding the same functionality to the final field.
Thanks