Click here to Skip to main content
14,832,124 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm using the following code for my 3 level drop down menu:

XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>

 <title>3 level dynamic drop down list using javascript</title>

 <script language="javascript" type="text/javascript">
 <!--
 function listboxchange1(p_index) {

 //Clear Current options in subcategory1
 document.form1.subcategory1.options.length = 0;

 //Clear Current options in subcategory2
 document.form1.subcategory2.options.length = 0;
 document.form1.subcategory2.options[0] = new Option("Select Sub-Category 2", "");

 switch (p_index) {

 case "Asia":
 document.form1.subcategory1.options[0] = new Option("Select Sub-Category 1", "");

 document.form1.subcategory1.options[1] = new Option("India", "India");

 document.form1.subcategory1.options[2] = new Option("China", "China");
 break;

 case "Europe":
 document.form1.subcategory1.options[0] = new Option("Select Sub-Category 1", "");

 document.form1.subcategory1.options[1] = new Option("UK", "UK");

 document.form1.subcategory1.options[2] = new Option("Germany", "Germany");

 break;


 }
 return true;
 }
 //-->
 </script>

 <script language="javascript" type="text/javascript">
 <!--

 function listboxchange(p_index) {

 //Clear Current options in subcategory
 document.form1.subcategory2.options.length = 0;


 switch (p_index) {

 case "India":
 document.form1.subcategory2.options[0] = new Option("Select Sub-Category2", "");

 document.form1.subcategory2.options[1] = new Option("Chennai", "http://google.com/");

 document.form1.subcategory2.options[2] = new Option("Madurai", "http://google.com/");

 document.form1.subcategory2.options[3] = new Option("Trichi", "http://google.com/");

 break;

 case "China":
 document.form1.subcategory2.options[0] = new Option("Select Sub-Category2", "");

 document.form1.subcategory2.options[1] = new Option("Beijing", "http://google.com/");

 document.form1.subcategory2.options[2] = new Option("Shangai", "http://google.com/");

 break;

 case "UK":
 document.form1.subcategory2.options[0] = new Option("Select Sub-Category2", "");

 document.form1.subcategory2.options[1] = new Option("London", "http://google.com/");

 document.form1.subcategory2.options[2] = new Option("Manchester", "http://google.com/");

 break;

 case "Germany":
 document.form1.subcategory2.options[0] = new Option("Select Sub-Category2", "");

 document.form1.subcategory2.options[1] = new Option("Berlin", "http://google.com/");

 document.form1.subcategory2.options[2] = new Option("Munich", "http://google.com/");

 break;

 }
 return true;
 }
 //-->
 </script>

 </head>
 <body>
 <form id="form1" name="form1" method="post" action="insertarticle.asp" onsubmit="return ValidateForm(); true">
 <table width="50%" border="1" align="center" cellpadding="2" cellspacing="0">
 <tr>
 <td width="21%" align="right" valign="middle">
 <strong>Continent :</strong>
 </td>
 <td width="79%" align="left" valign="middle">
 <select name="category" id="category" onchange="javascript: listboxchange1(this.options[this.selectedIndex].value);">
 <option value="">Select Category</option>
 <option value="Asia">Asia</option>
 <option value="Europe">Europe</option>
 </select>
 </td>
 </tr>
 <tr>
 <td align="right" valign="middle">
 <strong>Countries :</strong>
 </td>
 <td align="left" valign="middle">

 <script type="text/javascript" language="javascript">
 <!--
 document.write('<select name="subcategory1" onChange="javascript: listboxchange(this.options[this.selectedIndex].value);"><option value="">Select Sub-Category 1</option></select>')
 -->
 </script>

 </td>
 </tr>
 <tr>
 <td align="right" valign="middle">
 <strong>Cities :</strong>
 </td>
 <td align="left" valign="middle">

 <script type="text/javascript" language="javascript">
 <!--
 document.write('<select name="subcategory2"><option value="">Select Sub-Category 2</option></select>')
 -->
 </script>

 </td>
 </tr>
 </table>
 </form>
 </body>
 </html>


The problem is that the links to redirect to google.com are not working, when I select the last selection in the third drop down menu nothing happens.
Posted

1 solution

Your code is not redirecting anything to google.com
HTML
The following html is being generated for one of the Cities dropdownlist.
As you can see the value is the google.com address, when it gets selected it will not goto the value in the option.
<select name="subcategory2">
    <option value="">Select Sub-Category2</option>
    <option value="http://google.com/">Chennai</option>
    <option value="http://google.com/">Madurai</option>
    <option value="http://google.com/">Trichi</option>
</select>

You could do something like this to get your code to go to the url in the value option:
HTML
                <script type="text/javascript" language="javascript">
                    <!--
//add onChange to subcategory2 to call function to redirect, or use location.href directly
                    document.write('<select name="subcategory2" onChange="javascript: goto(this.options[this.selectedIndex].value);"><option value="">Select Sub-Category 2</option></select>')
                    -->
                </script>

Make note the document.write is not required, ordinary markup will do:
HTML
<select name="subcategory1" onChange="javascript: listboxchange(this.options[this.selectedIndex].value);">
    <option value="">Select Sub-Category 1</option>
</select>

<select name="subcategory2" onChange="javascript:goto(this.options[this.selectedIndex].value);">
    <option value="">Select Sub-Category 2</option>
</select>

JavaScript
function goto(url){
    location.href=url;
}

http://www.w3schools.com/jsref/prop_loc_href.asp[^]
   
v2
Comments
Member 11320782 18-Dec-14 18:47pm
   
Thanks so much! That seemed to work perfectly!!
jaket-cp 19-Dec-14 4:18am
   
Not a problem, glad to help.
I have also updated my solution, specifying the document.write is not required and the select markup can go in as is.
Happy coding.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900