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).

Demo of page redirection by selection of dropdown menu

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.

Demo of Page Redirection using two listbox

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 
}

Questions

How can I redirect to a different page based on the selection made in a dropdown menu using JavaScript?

What event should I listen to in order to trigger the page redirection when the dropdown selection changes?

Can I redirect to both internal and external URLs based on the dropdown selection?

How can I retrieve the selected value from the dropdown menu in JavaScript?

Is it possible to redirect to a different page without using the window.location object?

What are some best practices for handling page redirections based on dropdown selection in JavaScript?

Can I add additional logic or conditions before performing the redirection based on the dropdown selection?

How can I handle cases where the selected option does not have a corresponding redirect page?

Are there any security considerations when redirecting based on user input from a dropdown menu?

Can I animate or add transition effects during the page redirection process?

Subscribe to our YouTube Channel here

Tom	10-02-2014
Thank you for this amazing code. Now I am trying to figure out how to add a third list box by adding another function to the code. Is it even possible? Any help would be greatly appreciated?

Vikas Jangra	24-04-2015
thanks a lot....very useful and logical coding

	20-06-2023
Thank you for this amazing code. Now I am trying to figure out how to add a third list box by adding another function to the code. Is it even possible? Any help would be greatly appreciated?

	22-07-2023
Yes, it should be possible, but better to use JQuery here. we will try.

	03-09-2020
Thanks for this content, this is a very useful

On Selection of Dropdown menu redirecting page

Redirecting using two dropdown linked menu

Questions

Subscribe