title: How to show/hide a select list after the selection in another select list is made?
body: <p>I have a select list that looks like this at the moment: 
  <a href="https://i.stack.imgur.com/o730z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o730z.png" alt="enter image description here"></a></p>
  
  <p>Now I want the second select list to only show up when a selection/change has been made to the first select list. And when a selection/change is made to second one I want the third+ fourth select lists to show up. 
  <a href="https://i.stack.imgur.com/03m4p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/03m4p.png" alt="enter image description here"></a></p>
  
  <p>This is the code of the select lists:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div id="content-a"&gt;
          &lt;div class='content-row'&gt;
              &lt;div class="select_1 col-md-12"&gt;
                  &lt;span&gt;
                      &lt;select class="form-control" name="table_names" id="slctTable"&gt; 
                      &lt;/select&gt;
                  &lt;/span&gt;    
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;  
      &lt;div class="select_2 col-md-12"&gt;
          &lt;span&gt;
              &lt;select class="form-control" name="column_names" id="slctField"&gt;
              &lt;/select&gt;
          &lt;/span&gt;    
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="select_3 col-md-3"&gt;
          &lt;span&gt;
              &lt;select class="form-control" name="comparisonOperators" id="slctOperator"&gt;  
              &lt;/select&gt;
          &lt;/span&gt;    
      &lt;/div&gt;
      &lt;div class="select_4 col-md-9"&gt;
          &lt;span&gt;
              &lt;select class="form-control" name="attribute_names" id="slctAttribute"&gt;  
              &lt;/select&gt;
          &lt;/span&gt;    
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>