Redirecting page to different location after selection of dropdown listbox in JavaScript

We can keep one dropdown listbox for the users to select one area ( option ) and then the script will redirect the page to that section. This is done by using onChange event of dropdown listbox. Once the user selection one option then by onChange event we run one function SelectRedirect(). The function will receive the user selected option value like this.

document.getElementById('s1').value

Here we have used getElementById to get the value of the selected option. After this we compare the selected value using switch function. Inside the switch statement we kept various redirection options by matching with the input value ( selected option). Here is the code.

<html>
<head>
<title>Demo of page redirection after selection of a drop down listbox menu</title>
<script language="javascript">
function SelectRedirect(){
// ON selection of section this function will work
//alert( document.getElementById('s1').value);

switch(document.getElementById('s1').value)
{
case "PHP":
window.location="../php_tutorial/site_map.php";
break;

case "ASP":
window.location="../asp-tutorial/site_map.php";
break;

case "MySQL":
window.location="../sql_tutorial/site_map.php";
break;
case "JS":
window.location="site_map.php";
break;

case "HTML":
window.location="../html_tutorial/site_map.php";
break;

/// Can be extended to other different selections of SubCategory //////
default:
window.location="../"; // if no selection matches then redirected to home page
break;
}// end of switch 
}
////////////////// 
</script>
</head>
<body>

<SELECT id="s1" NAME="section" onChange="SelectRedirect();">
<Option value="">Select Section</option>
<Option value="PHP">PHP</option>
<Option value="ASP">ASP</option>
<Option value="MySQL">MySQL</option>
<Option value="JS">JavaScript</option>
<Option value="HTML">HTML</option>
</SELECT>

</body>
</html>

Redirecting using two dropdown linked menu

This script is further improved to add page redirect after selection of 2nd list box. For example if you select script from first list and then select PHP in second list then the page will get redirected to PHP home page. Same way if you select ASP it will redirect to ASP home page. For any other combination of selection the page will be redirected to home page. Here is the code

<html>
<head>
<title>Demo of JavaScript dynamic drop down list with page redirect after selection of 2nd  value</title>
<META NAME="DESCRIPTION" CONTENT=
";>
<META NAME="KEYWORDS" CONTENT=" ">
<script language="javascript" src="dd-list2.js"></script>
</head>
<body  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" onChange="SelectRedirect();">
<Option value="">SubCat</option>
</SELECT>
</form>
<br><br>

Select SCRIPT ( 1st List ) then PHP ( 2nd List )to check how the page gets redirected to PHP home section.
<br><br>
<br><br>
<input type=button onClick="self.close();" value="Close this window"> 

</body>
</html>

The include file is here

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);
}
///////////////////

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

//alert( document.drop_list.SubCat.value);

switch(document.drop_list.SubCat.value)
{
case "PHP":
window.location="../php_tutorial/site_map.php";
break;

case "ASP":
window.location="../asp-tutorial/site_map.php";
break;

case "Perl":
window.location="../sql_tutorial/site_map.php";
break;

/// Can be extended to other different selections of SubCategory //////

default:
window.location="../"; // if no selection matches then redirected to home page
break;

}// end of switch 
}

On Selection of Dropdown menu redirecting page

Redirecting using two dropdown linked menu

Subscribe