title: 3 Level Dependent Dropdown Menu with Jquery
body: <p>Hey everyone so I'm pretty new when it comes to Jquery &amp; javascript &amp; i'm working with some code left over from a previous developer. I need the values that show in each dropdown menu to be dependent on the one above it, and only the correct values to show for each option. I've looked around and have found information on 2-stage dropdowns in this way, but never on adding an extra stage after that. Here's the code I have below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    var $cat = $("#category1"),
        $subcat = $("#category2"),
        $volt = $("#category3");
  
        $cat.on("change",function(){
          var _rel = $(this).val();
          $subcat.find("option").attr("style","");
          $subcat.val("");
          if(!_rel) return $subcat.prop("disabled",true);
          $subcat.find("[rel="+_rel+"]").show();
          $subcat.prop("disabled",false);
        });
  
        $subcat.on("change",function(){
          var _rel = $(this).val();
          $volt.find("option").attr("style","");
          $volt.val("");
          if(!_rel) return $volt.prop("disabled",true);
          $volt.find("[rel="+_rel+_rel+"]").show();
          $volt.prop("disabled",false);
        });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#category2 option{
          display:none;
      }
      
      #category2 option.label{
          display:block;
      }
      
      #category3 option{
          display:none;
      }
      
      #category3 option.label{
          display:block;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  
      &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;First Dropdown Menu:&lt;/td&gt;
                  &lt;td width="59%" align="left" valign="middle"&gt;
                      &lt;select name="category1" id="category1"&gt;
                          &lt;option value=""&gt;Please Select&lt;/option&gt;
                          &lt;option value="Option1"&gt;ONE&lt;/option&gt;
                          &lt;option value="Option2"&gt;TWO&lt;/option&gt;
                          &lt;option value="Option3"&gt;THREE&lt;/option&gt;
                          &lt;option value="Option4"&gt;FOUR&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
      &lt;form id="formname1" name="formname1" method="post" action="submitform.asp" &gt;
              &lt;tr&gt;
                  &lt;td align="right" valign="middle"&gt;Second Dropdown Menu:&lt;/td&gt;
                  &lt;td align="left" valign="middle"&gt;
                      &lt;select disabled="disabled" id="category2" name="category2"&gt;
                          &lt;option class="label" value&gt;Please Select&lt;/option&gt;
      &lt;!-- R --&gt;
                          &lt;option rel="Option1" value="R12"&gt;12&lt;/option&gt;
                          &lt;option rel="Option1" value="R24"&gt;24&lt;/option&gt;
                          &lt;option rel="Option1" value="R36"&gt;36&lt;/option&gt;
                          &lt;option rel="Option1" value="R48"&gt;48&lt;/option&gt;
                          &lt;option rel="Option1" value="R80"&gt;80&lt;/option&gt;
      &lt;!-- H --&gt;
                          &lt;option rel="Option2" value="H12"&gt;12&lt;/option&gt;
                          &lt;option rel="Option2" value="H24"&gt;24&lt;/option&gt;
                          &lt;option rel="Option2" value="H36"&gt;36&lt;/option&gt;
                          &lt;option rel="Option2" value="H48"&gt;48&lt;/option&gt;
                          &lt;option rel="Option2" value="H80"&gt;80&lt;/option&gt;
      &lt;!-- L --&gt;
                          &lt;option rel="Option3" value="L12"&gt;12&lt;/option&gt;
                          &lt;option rel="Option3" value="L24"&gt;24&lt;/option&gt;
                          &lt;option rel="Option3" value="L36"&gt;36&lt;/option&gt;
                          &lt;option rel="Option3" value="L48"&gt;48&lt;/option&gt;
                          &lt;option rel="Option3" value="L80"&gt;80&lt;/option&gt;
      &lt;!-- B --&gt;
                          &lt;option rel="Option4" value="B12"&gt;12&lt;/option&gt;
                          &lt;option rel="Option4" value="B24"&gt;24&lt;/option&gt;
                          &lt;option rel="Option4" value="B36"&gt;36&lt;/option&gt;
                          &lt;option rel="Option4" value="B48"&gt;48&lt;/option&gt;
                          &lt;option rel="Option4" value="B80"&gt;80&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
      &lt;form id="formname2" name="formname2" method="post" action="submitform.asp" &gt;
              &lt;tr&gt;
                  &lt;td align="right" valign="middle"&gt;Third Dropdown Menu&lt;/td&gt;
                  &lt;td align="left" valign="middle"&gt;
                      &lt;select disabled="disabled" id="category3" name="category3"&gt;
      &lt;option class="label" value&gt;Please Select&lt;/option&gt;
      &lt;!-- R --&gt;
                          &lt;option rel="R12" value="12v1"&gt;R12V1&lt;/option&gt;
                          &lt;option rel="R24" value="R24v1"&gt;R24V1&lt;/option&gt;
                          &lt;option rel="R36" value="R36v1"&gt;R36V1&lt;/option&gt;
                          &lt;option rel="R48" value="R48v1"&gt;R48V1&lt;/option&gt;
                          &lt;option rel="R80" value="R80v1"&gt;R80V1&lt;/option&gt;
      &lt;!-- H --&gt;
                          &lt;option rel="H12" value="H12v1"&gt;H12V1&lt;/option&gt;
                          &lt;option rel="H24" value="H24v1"&gt;H24V1&lt;/option&gt;
                          &lt;option rel="H36" value="H36v1"&gt;H36V1&lt;/option&gt;
                          &lt;option rel="H48" value="H48v1"&gt;H48V1&lt;/option&gt;
                          &lt;option rel="H80" value="H80v1"&gt;H80V1&lt;/option&gt;
      &lt;!-- L --&gt;
                          &lt;option rel="L12" value="L12v1"&gt;L12V1&lt;/option&gt;
                          &lt;option rel="L24" value="L24v1"&gt;L24V1&lt;/option&gt;
                          &lt;option rel="L36" value="L36v1"&gt;L36V1&lt;/option&gt;
                          &lt;option rel="L48" value="L48v1"&gt;L48V1&lt;/option&gt;
                          &lt;option rel="L80" value="L80v1"&gt;L80V1&lt;/option&gt;
      &lt;!-- B --&gt;
                          &lt;option rel="B12" value="B12v1"&gt;B12V1&lt;/option&gt;
                          &lt;option rel="B24" value="B24v1"&gt;B24V1&lt;/option&gt;
                          &lt;option rel="B36" value="B36v1"&gt;B36V1&lt;/option&gt;
                          &lt;option rel="B48" value="B48v1"&gt;B48V1&lt;/option&gt;
                          &lt;option rel="B80" value="B80v1"&gt;B80V1&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can get the 2nd menu to work correctly, but the third menu always just shows everything, or doesn't work at all. I can't get it to depend on the values of the 2nd menu. Does anyone know how to solve this? Any help would be much appreciated.</p>