JavaScript Dynamic dependent drop down list box

Javascript 14 Comments

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>



Author

Search

Back to Top