I am very new to Javascript but have found a great tutorial to create a dynamic dropdown menu. I got it to work, but have problems redirecting it to the correct page after the necessary page refresh to load the items in the 2nd dropdown menu.

The Javascript in the header is the following:

<SCRIPT language=JavaScript> 
function reload(form){
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='index.php?cat=' + val ;}
My PHP controller (index.php) code to load the correct frames is as follows:

<ul id="navbar">
<li><a href="index.php?id=home">Home</a></li>
<li><a href="index.php?id=overview">Overview</a></li>
<li><a href="index.php?id=add">Add new product</a></li>
include ('add.html.php');}
else {

	default: include('home.html.php');
	break; case "home": include('home.html.php');
	break; case "overview": include('add.html.php');
	break; case "add": include('add.html.php');
So I have made a workaround to load the "add.html.php" frame with the if(isset)$_GET['cat']. But what I really would like to do is to change the Javascript self.location to

self.location='index.php?id=toevoegen?cat=' + val ;}
so that the PHP index script loads the add.html.php automatically. However, when changing the self.location as described above the page is redirected to home.html.php.

It is really frustrating me, I have googled for a full day but aren't even close to a solution. Therefore I turned to this thread. Can someone please tell me how I can easily load the correct frame by using Javascript?