Tamil Codes
3 level Dynamic Drop Down List using java script
By TamilCodes
Added on September 04, 2009
Viewed 8809 Times

Here is the snippet for 3 level dynamic drop down list using java script. It has category, sub-category1 and sub-category2.


Demo Page of 3 level dynamic drop down list 

<!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", "Chennai");

  document.form1.subcategory2.options[2] = new Option("Madurai", "Madurai");

  document.form1.subcategory2.options[3] = new Option("Trichi", "Trichi");

  break;

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

  document.form1.subcategory2.options[1] = new Option("Beijing", "Beijing");

  document.form1.subcategory2.options[2] = new Option("Shangai", "Shangai");

  break;

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

  document.form1.subcategory2.options[1] = new Option("London", "London");

  document.form1.subcategory2.options[2] = new Option("Manchester", "Manchester");

  break;

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

  document.form1.subcategory2.options[1] = new Option("Berlin", "Berlin");

  document.form1.subcategory2.options[2] = new Option("Munich", "Munich");

  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>
 


 Demo Page of 3 level dynamic drop down list

 


Comments
1 
Name: Naseer khan Posted on: August 08, 2010
Comments: how to hyperlink the last droendoen list options with or without "GO" button
Name: vinod Posted on: May 22, 2010
Comments: could you pls tell how to hyperlink the last droendoen list options with or without "GO" button
Name: niprav Posted on: October 29, 2009
Comments: sorry, man, too many lines for a simple problem, but ok, you're presistent and that is good... for you.
1 
   
Name:
Comments:
     
   

© 2008 - 2020. Tamilcodes.com. All rights reserved.
Valid XHTML 1.0 Transitional Valid CSS!