title: Show second dropdown based on previous dropdown selection
body: <p>I am new to html/javascript and I am developing and trying to figure out how to use the code from <a href="https://stackoverflow.com/questions/6954556/show-a-second-dropdown-based-on-previous-dropdown-selection">this link</a>.</p>
  
  <p>I can see the solution presented in below link, but not sure how to apply in the context of the html page:
  <a href="http://jsfiddle.net/3UWk2/3/" rel="nofollow noreferrer">http://jsfiddle.net/3UWk2/3/</a></p>
  
  <p>I have copied the HTML and JavaScript function content within a HTML page, but it basically displays all the lines and select boxes... any idea how is this intended to work? Should I have a separate html page with the html code and the JavaScript function in a different file and somehow call the 2 together?</p>
  
  <pre><code>&lt;select size="1" id="Rank" title="" name="Rank"&gt;
      &lt;option value=""&gt;-Select Your Rank-&lt;/option&gt;
      &lt;option value="airman"&gt;Airman&lt;/option&gt;
      &lt;option value="senior-airman"&gt;Senior Airman&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="airman"&gt;
          &lt;select class="second-level-select"&gt;
              &lt;option value=""&gt;-Select Your Rank-&lt;/option&gt;
              &lt;option value="basic-ore-1"&gt;Basic Ore Miner - Level 1&lt;/option&gt;
              &lt;option value="basic-ore-2"&gt;Basic Ore Miner - Level 2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="senior-airman"&gt;
          &lt;select class="second-level-select"&gt;
              &lt;option value=""&gt;-Select Your Rank-&lt;/option&gt;
              &lt;option value="omber-miner-1"&gt;Omber Miner - Level 1&lt;/option&gt;
              &lt;option value="omber-miner-2"&gt;Omber Miner - Level 2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="second-level-container"&gt;
      &lt;div class="basic-ore-1"&gt;
          Line of text for basic ore miner 1
      &lt;/div&gt;
      &lt;div class="basic-ore-2"&gt;
          Line of text for basic ore miner 2
      &lt;/div&gt;
      &lt;div class="omber-miner-1"&gt;
          Line of text for omber miner 1
      &lt;/div&gt;
      &lt;div class="omber-miner-2"&gt;
          Line of text for omber miner 2
      &lt;/div&gt;    
  &lt;/div&gt;
  
  $(document).ready(function() {
      $('#Rank').bind('change', function() {
          var elements = $('div.container').children().hide(); // hide all the elements
          var value = $(this).val();
  
          if (value.length) { // if somethings' selected
              elements.filter('.' + value).show(); // show the ones we want
          }
      }).trigger('change');
  
      $('.second-level-select').bind('change', function() {
          var elements = $('div.second-level-container').children().hide(); // hide all the elements
          var value = $(this).val();
  
          if (value.length) { // if somethings' selected
              elements.filter('.' + value).show(); // show the ones we want
          }
      }).trigger('change');
  });
  </code></pre>