On Selection of Dropdown menu redirecting page

Redirect on Selection of listbox 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


Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    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

    03-09-2020

    Thanks for this content, this is a very useful

    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.

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer