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>
Comments
Very informative post. Thanks http://www.tamilcodes.com for taking the time to share your view with us.
how can i connect this to a database? especially the sub categories?
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.
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.
What is the language you use to query. I can help with Classic ASP or asp.net
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?
nevermind, it worked (i had an extra set of quotes in the middle of a case option).
:-/
thanks for the help.
Thanks!! worked liked a charm
Hey this is a great code do you know how i could make the subcategories appear as links ?
nice code. How can i pass the selected variables as values to a php page so as to retrieve what is selected.
How can i retrieve the selected variables using $_POST[”] in a php page
well,this is hardcoded.I want to fetch the items used from database using ajax call.how can I make it?? thanks all
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.
Sorry I forgot to mention, I am working in Classic ASP with javascript.