title: Display subcategory only if someone selects a category
body: <p>Any suggestion on how I can display or show the subcategory only when someone selects a category and also if someone chose a category and does not select a subcategory(for example person selects the option "select sub-category"), it will automatically hide the subcategory select box.</p>
  
  <p>Here is my HTML Code</p>
  
  <pre><code>&lt;!-- Row for Main Category Starts--&gt;
  &lt;div class="row required"&gt;
  &lt;label for="category_level_1"&gt;Category&lt;/label&gt;           o              
  &lt;div class="column"&gt;
      &lt;select id="Category" &gt;
      &lt;option value=""&gt;Select Category&lt;/option&gt;
      &lt;?php
      $getCategory = $category-&gt;getAllCat();
      if($getCategory){
      while($result = $getCategory-&gt;fetch_assoc()){
      ?&gt;
      &lt;option value="&lt;?php echo $result['catId']; ?&gt;"&gt;&lt;?php echo $result['catName']; ?&gt;&lt;/option&gt;
      &lt;?php } } ?&gt;
      &lt;/select&gt;                          
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- Row for Main Category Ends--&gt;
  &lt;!-- Row for Sub Category Starts--&gt;
      &lt;div class="row hidden"  &gt;
      &lt;label for="subcategory"&gt;Subcategory&lt;/label&gt;                           
      &lt;div class="column"&gt;
      &lt;select id="Subcategory" &gt;
      &lt;option value=""&gt;Select sub-category&lt;/option&gt;
      &lt;/select&gt;                            
  &lt;/div&gt;
  &lt;/div&gt;
   &lt;!-- Row for Sub Category Ends--&gt;
  </code></pre>
  
  <p>And here is my Ajax and Javascript</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $('#Category').on('change',function(){
      var categoryID = $(this).val();
      if(categoryID){
          $.ajax({
              type:'POST',
              url:'fetch.php',
              data:'catId='+categoryID,
              success:function(html){
                  $('#Subcategory').html(html);
              }
          }); 
      }else{
          $('#Subcategory').html('&lt;option value=""&gt;Select Category first&lt;/option&gt;');
      }
  }); 
    });
     &lt;/script&gt;
  </code></pre>