title: JavaScript dependent drop down list
body: <p>How do you make a dependent drop down list with JavaScript?</p>
  
  <p>I need first category list to trigger other 2 (or more) categories to show up with lists that depends on what was your selection on first category.</p>
  
  <p>Is that possible?</p>
  
  <p>Here's my code :</p>
  
  <pre><code>&lt;code&gt; 
  
  function dropdownlist(listindex)
   {
  
  document.formname.category2.options.length = 0;
   switch (listindex)
   {
  
   case "Home Ware" :
   document.formname.category2.options[0]=new Option("Select Category2","");
   document.formname.category2.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
   document.formname.category2.options[2]=new Option("Audio/Video","Audio/Video");
   document.formname.category2.options[3]=new Option("Beddings","Beddings");
   document.formname.category2.options[4]=new Option("Camera","Camera");
   document.formname.category2.options[5]=new Option("Cell Phones","Cell Phones");
  
   break;
  
   case "Education" :
   document.formname.category2.options[0]=new Option("Select Category2","");
   document.formname.category2.options[1]=new Option("Colleges","Colleges");
   document.formname.category2.options[2]=new Option("Institutes","Institutes");
   document.formname.category2.options[3]=new Option("Schools","Schools");
   document.formname.category2.options[4]=new Option("Tuitions","Tuitions");
   document.formname.category2.options[5]=new Option("Universities","Universities");
  
   break;
  
   case "Books" :
   document.formname.category2.options[0]=new Option("Select Category2","");
   document.formname.category2.options[1]=new Option("College Books","College Books");
   document.formname.category2.options[2]=new Option("Engineering","Engineering");
   document.formname.category2.options[3]=new Option("Magazines","Magazines");
   document.formname.category2.options[4]=new Option("Medicine","Medicine");
   document.formname.category2.options[5]=new Option("References","References");
  
   break;
  
   }
   return true;
   }
  &lt;/code&gt;
  </code></pre>
  
  <p>Html :</p>
  
  <pre><code>    &lt;form id="formname" name="formname" method="post" action="submitform.asp" &gt;
   &lt;table width="50%" border="0" cellspacing="0" cellpadding="5"&gt;
   &lt;tr&gt;
   &lt;td width="41%" align="right" valign="middle"&gt;Category1 :&lt;/td&gt;
   &lt;td width="59%" align="left" valign="middle"&gt;&lt;select name="category1" id="category1" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);"&gt;
   &lt;option value=""&gt;Select Category1&lt;/option&gt;
   &lt;option value="Home Ware"&gt;Home Ware&lt;/option&gt;
   &lt;option value="Education"&gt;Education&lt;/option&gt;
   &lt;option value="Books"&gt;Books&lt;/option&gt;
   &lt;/select&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
   &lt;td align="right" valign="middle"&gt;Category2 :
   &lt;/td&gt;
   &lt;td align="left" valign="middle"&gt;&lt;script type="text/javascript" language="JavaScript"&gt;
   document.write('&lt;select name="category2"&gt;&lt;option value=""&gt;Select Category2&lt;/option&gt;&lt;/select&gt;')
   &lt;/script&gt;
   &lt;noscript&gt;&lt;select name="category2" id="category2" &gt;
   &lt;option value=""&gt;Select Category2&lt;/option&gt;
   &lt;/select&gt;
   &lt;/noscript&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;/table&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I believe it is not possible to create a third list that would be triggered by choosing "Home ware" and have different selections? </p>