title: Hierarchy Select List using jQuery
body: <p>I'm trying to make a fairly advanced hierarchy of drop down options. 
  I'm attempting to make it so any options that aren't related to the previous option chosen, will be hidden. For an example, when Device Groups is chosen, the second dropdown will be "Group Details" (from the middle dropdown) by default, and the bottom dropdown will disappear since it wont be used. Then when I switch back to Device Settings (top dropdown) the middle dropdown will default to Device Details (middle dropdown) and the bottom dropdown will reappear and only show options related to Device and not Notification.</p>
  
  <p>Here's my code,</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>/* global $ */
  $(document).ready(function(){
      $( "#top" ).change(function() {
        var value = $(this).val();
          $("#middle").prop("disabled", false);
          $("#middle &gt; option").hide();
          $("#middle &gt; option[value*='" + value +"']").show();
          $("#bottom").prop("disabled", false);
          $("#bottom &gt; option").hide();
          $("#bottom &gt; option[value*='" + value +"']").show();
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
      &lt;select id="top" class="top"&gt;
          &lt;option value="Settings"&gt;Device Settings&lt;/option&gt;
          &lt;option value="Groups"&gt;Device Groups&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;select id="middle" class="middle"&gt;
          &lt;option value="Settings--Details"&gt;Device Details&lt;/option&gt;
          &lt;option value="Settings--Notification"&gt;Notification List&lt;/option&gt;
          &lt;option value="Settings--Digital"&gt;Digital Inputs&lt;/option&gt;
          &lt;option value="Settings--Analog"&gt;Analog Inputs&lt;/option&gt;
          &lt;option value="Settings--DigitalO"&gt;Digital Outputs&lt;/option&gt;
          &lt;option value="Settings--Geofencing"&gt;Geofencing&lt;/option&gt;
          &lt;option value="Settings--Application"&gt;Application Specific&lt;/option&gt;
          &lt;option value="Groups--GroupDe"&gt;Group Details&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;select id="bottom" class="bottom"&gt;
          &lt;option value="Settings--Details--BasicInfo"&gt;Basic Info&lt;/option&gt;
          &lt;option value="Settings--Details--SiteDetails"&gt;Site Details&lt;/option&gt;
          &lt;option value="Settings--Notification--Add"&gt;Add or Edit&lt;/option&gt;
          &lt;option value="Settings--Notification--Import"&gt;Import Notification List&lt;/option&gt;
          &lt;option value="Settings--Digital--Displayed"&gt;Show Displayed Only&lt;/option&gt;
          &lt;option value="Settings--Digital--All"&gt;Show All&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>