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). 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 
}
Visitors Rating
Your Rating





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

Post your comments , suggestion , error , requirements etc here .




HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer