ASP.NET, c#, html, javascript, sql, access, mysql, asp tutorials articles code snippets.

Dynamic dependent drop down list box can be created using Java Script. In most of the HTML FORMS you need to have to list boxes. The first one is the category and second one is the sub-category. When you select the first list box, depending upon the category selected the second list box gets populated with the sub categories.

The Java Script code works as when the category list box is selected the index value of the category list box passed to the java script. Based the on index value the subcategory list box is populated with the dependent values. The Java Script is code more self explanatory. The code snippet is given below. Though the code looks very lengthy it is very simple to understand.

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script language="javascript" type="text/javascript">
 function dropdownlist(listindex)
 {

document.formname.subcategory.options.length = 0;
 switch (listindex)
 {

 case "Home Ware" :
 document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
 document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
 document.formname.subcategory.options[2]=new Option("Audio/Video","Audio/Video");
 document.formname.subcategory.options[3]=new Option("Beddings","Beddings");
 document.formname.subcategory.options[4]=new Option("Camera","Camera");
 document.formname.subcategory.options[5]=new Option("Cell Phones","Cell Phones");

 break;

 case "Education" :
 document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
 document.formname.subcategory.options[1]=new Option("Colleges","Colleges");
 document.formname.subcategory.options[2]=new Option("Institutes","Institutes");
 document.formname.subcategory.options[3]=new Option("Schools","Schools");
 document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");
 document.formname.subcategory.options[5]=new Option("Universities","Universities");

 break;

 case "Books" :
 document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
 document.formname.subcategory.options[1]=new Option("College Books","College Books");
 document.formname.subcategory.options[2]=new Option("Engineering","Engineering");
 document.formname.subcategory.options[3]=new Option("Magazines","Magazines");
 document.formname.subcategory.options[4]=new Option("Medicine","Medicine");
 document.formname.subcategory.options[5]=new Option("References","References");

 break;

 }
 return true;
 }
 </script>
 </head>
 <title>Dynamic Drop Down List</title>
 <body>

<form id="formname" name="formname" method="post" action="submitform.asp" >
 <table width="50%" border="0" cellspacing="0" cellpadding="5">
 <tr>
 <td width="41%" align="right" valign="middle">Category :</td>
 <td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
 <option value="">Select Category</option>
 <option value="Home Ware">Home Ware</option>
 <option value="Education">Education</option>
 <option value="Books">Books</option>
 </select></td>
 </tr>
 <tr>
 <td align="right" valign="middle">Sub Category :
 </td>
 <td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
 document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
 </script>
 <noscript><select name="subcategory" id="subcategory" >
 <option value="">Select Sub-Category</option>
 </select>
 </noscript></td>
 </tr>
 </table>

</form>


</body>
 </html>



Categories: Javascript

14 Responses so far.

  1. Maybell1988 says:

    Very informative post. Thanks http://www.tamilcodes.com for taking the time to share your view with us.

  2. john says:

    how can i connect this to a database? especially the sub categories?

    • admin says:

      Initially, the categories and subcategories has to be created in the database. Depending on your scripting language both data has to be pulled from the database and rendered in the function of the script.

      • Nick says:

        I have a database query of “select * from makes” and one for “select * from models where make = x”. How would I populate the above javascript as a result?

        Your guidance would be very useful.

      • admin says:

        What is the language you use to query. I can help with Classic ASP or asp.net

      • Manisha Sarangi says:

        well,this is hardcoded.I want to fetch the items used from database using ajax call.how can I make it?? thanks all

  3. joshua says:

    I have a rather large list that i’m trying to do this with:
    274 Categories
    9,036 Sub-Categories

    This solution doesn’t seem to work with lists this large. Do you have any suggestions for larger lists?

    • joshua says:

      nevermind, it worked (i had an extra set of quotes in the middle of a case option).

      :-/

      thanks for the help.

  4. Joseph says:

    Thanks!! worked liked a charm

  5. Langston says:

    Hey this is a great code do you know how i could make the subcategories appear as links ?

  6. Olajide Olusegun says:

    nice code. How can i pass the selected variables as values to a php page so as to retrieve what is selected.

  7. Olajide Olusegun says:

    How can i retrieve the selected variables using $_POST[''] in a php page

  8. Rahul says:

    how to populate dropdown lists from database. In my case I cannot hard code the categories & sub-categories. Please provide me some guidelines on how to load the dropdown lists from database.

  9. Rahul says:

    Sorry I forgot to mention, I am working in Classic ASP with javascript.