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>
<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
}
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
✖
We use cookies to improve your browsing experience. . Learn more