How to make a 3 level drop down menu link work

Question

0.00/5 (No votes)

See more:

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 18-Dec-14 4:20am

Member 11320782

Add a Solution

1 solution

Add a Solution

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

jaket-cp · Accepted Answer · 2014-12-18T05:40:00

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[^]

How to make a 3 level drop down menu link work

1 solution

Solution 1

Add your solution here

Preview 0

How to make a 3 level drop down menu link work

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us