title: JavaScript jQuery dependent drop down list
body: <p>I have this dependent drop down box code, in which you pick first selection (motherboard) and the other ones(ram and video board) will show up depending on the first pick.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  
    var $cat = $("#motherboard"),
        $subcat = $(".subcat");
  
    $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);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.subcat option{
    display:none;
  }
  
  .subcat option.label{
    display:block;
  }
  
  /* useless template */
  
  div{
    margin-bottom:10px;
    float:left;
    width:100%;
  }
  label{
    float:left;
    width:200px;
    margin-left:20px
  }
  p{
    padding:5px 20px;
    background-color:#f1f1f1;
    float:left;
    border:solid 1px #ccc;
    color:#333;
    text-transform:uppercase;
    margin: 20px 0 30px;
  }
  body{
    font-family:arial;
    font-size:14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h1&gt;Made your PC:&lt;/h1&gt;
  
  &lt;div&gt;
    &lt;label&gt;Select motherboard: &lt;/label&gt;&lt;select id="motherboard" name="motherboard"&gt;
    &lt;option class="label" value&gt;Select Motherboard&lt;/option&gt;
    &lt;!-- Home Ware --&gt;
    &lt;option value="AS1"&gt;ASUS RAMPAGE V EXTREME&lt;/option&gt;
    &lt;option value="AS2"&gt;ASUS ATX DDR3 2600 LGA&lt;/option&gt;
    &lt;option value="GB1"&gt;Gigabyte AM3+&lt;/option&gt;
    &lt;option value="MSI1"&gt;MSI ATX DDR3 2600 LGA 1150&lt;/option&gt;
  
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;strong&gt;Only compatible components will show.&lt;/strong&gt;&lt;/p&gt;
  &lt;div&gt;
    &lt;label&gt;Select RAM: &lt;/label&gt; &lt;select disabled="disabled" class="subcat" id="RAM" name="RAM"&gt;
    &lt;option class="label" value&gt;RAM Memory&lt;/option&gt;
    &lt;option rel="AS1 AS2 GB1" value="KI1"&gt;Kingston Value RAM&lt;/option&gt;
    &lt;option rel="AS1 AS2 MSI1" value="P5KPL"&gt;P5KPL-AM SE&lt;/option&gt;
    &lt;option rel="MSI1 GB1" value="960GM"&gt;960GM-VGS3 FX &lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;label&gt;Select Video Board: &lt;/label&gt; &lt;select disabled="disabled" class="subcat" id="video-card" name="video-card"&gt;
    &lt;option class="label" value&gt;Video Card&lt;/option&gt;
    &lt;option rel="MSI1 AS2" value="EVGA8400"&gt;EVGA GeForce 8400 GS&lt;/option&gt;
    &lt;option rel="AS1" value="XFXAMD"&gt;XFX AMD Radeon HD 5450&lt;/option&gt;
    &lt;option rel="MSI1 GB1" value="GTX750Ti"&gt;EVGA GeForce GTX 750Ti SC&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can also see it on this <a href="http://jsfiddle.net/v917ycp6/10/" rel="nofollow">jsfiddle</a></p>
  
  <p>How can I add another first option, lets say "processor", that motherboard will depend on, and then everything else just like it is, depends on motherboard.</p>
  
  <p>Now its : Motherboad--->ram, video board.
  How to make: Processor--->motherboard--->ram, video board.</p>