JavaScript Forum

**rolda hayes** · 08:21 AM

Hi I'm having problems configuring this menu, it is set up with simple categories and sub cats but how would I get the results to jump to a url from a "submit button"?
html is

Code:

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">

<FORM name="drop_list" action="yourpage.php" method="POST" >
		
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>

</body>

</html>

and the js is:

Code:

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

i want to have it using car makes as one menu and then car models as the other, then linking to the relivant url after they have been selected.

Thanks for the help.

**logic ali** · 06-18-2007, 03:17 PM

Quote:

Originally Posted by rolda hayes

i want to have it using car makes as one menu and then car models as the other, then linking to the relivant url after they have been selected.

Presumably you are going to populate the values of the second select with the target URLs, in which case just add this inside the second <select> tag:

Code:

onchange='location.href=this.value'

**rolda hayes** · 06-19-2007, 06:14 AM

I need it to work like this

http://www.vantidy.co.uk/welded_racks.htm

I made that menu ages ago but there are more vehicles to add now and the new menu is a lot easier to add things to but I cantget them to work the same....

**rolda hayes** · 06-25-2007, 07:50 AM

Does anyone know how i would code it to jump to a url after the second menu has populated?

Ive inserted the submit button which jumps to "yourpage.php" but i need a different URL for evey item in the second menu