title: Third level selection from database
body: <p>I am trying to select data from third level of selection box i.e when i select any  option from first selection box then second selection box appears and it has the options related to the selected option from the first selection box and till now, all working good. Now i am trying to go one level more i.e. when i select option from second selection box, the third selection box will appear and it contains the options related to the second selection box. All the data in second and third selection boxes coming from the databases. </p>
  
  <p>Here is my code :-</p>
  
  <pre><code>     &lt;select id="options" class="form-control"&gt;
          &lt;option&gt;--&lt;/option&gt;                                         
          &lt;option value="1"&gt;Real Estate&lt;/option&gt;
          &lt;option value="2"&gt;Automobiles&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt; 
  
      &lt;select id="content-1" class="content hidden form-control" &gt;
          &lt;?php                
          $result = "SELECT * FROM sub_categories where categories_name ='Real Estate'"; 
          $data =mysqli_query ($conn, $result);               
  
          while ($row = mysqli_fetch_array($data))
           { ?&gt; 
  
           &lt;option&gt;&lt;?php echo $row['sub_categories_name'];?&gt;&lt;/option&gt;
          &lt;?php }?&gt;
      &lt;/select&gt;
  
  
      &lt;select id="content-2" class="content hidden form-control" &gt;
          &lt;?php                
          $result = "SELECT * FROM sub_categories where categories_name ='Automobiles'"; 
          $data =mysqli_query ($conn, $result);                 
  
           while ($row = mysqli_fetch_array($data))
           { ?&gt; 
  
           &lt;option&gt;&lt;?php echo $row['sub_categories_name'];?&gt;&lt;/option&gt;
           &lt;?php }?&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>Here is js : </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $("#options").change(function(){
                      $(".content").addClass("hidden");
                      $("#content-"+$(this).val()).removeClass("hidden");
                  });
              });
          &lt;/script&gt; 
  </code></pre>
  
  <p>for demo here is my static two level selection box in which i want to add the third level selection box. Please help me out, i am poorly trapped in it. here is the link 
  <a href="http://jsfiddle.net/Bhawesh7731/6mphs2gn/" rel="nofollow noreferrer">http://jsfiddle.net/Bhawesh7731/6mphs2gn/</a></p>