i want to make 2 html select tags dependent. how do i do it?

I have 2 select tags which will get information from database. 1 takes from product_category table and other takes from product. I want to make the products select tag depend on the product_category select tag. For Example I have 2 categories of Medicines 1 is capsules and other is tablets. I want the product select tag to display me the names of the capsules when i select capsules in the product_category select tag. how do i make it dependent? here is the code for those select tags.

<div class="form-group" style="width:50%;">
        <label>Select Category</label>
        <select class="form-control" name="product_category" id="product_category" >
            <?php 
            $query="SELECT * FROM product_category";
            $cat_result= mysqli_query($connection,$query);
            while($cat_row = mysqli_fetch_assoc($cat_result))
            {
              $ctg_id=$cat_row['category_id'];
              $ctg_name= $cat_row['category_name'];
              echo "<option value='$ctg_id'>$ctg_name</option>";
            }
            ?>    
        </select>
    </div>
   <div class="form-group" style="width:50%;">
        <label>Select Product</label>
        <select class="form-control" name="product_name" id="product_name">
            <?php 
            $query="SELECT product_id,product_name FROM product";
            $result= mysqli_query($connection,$query);
            while($row = mysqli_fetch_assoc($result))
            {
              $product_id=$row['product_id'];
              $product_name= $row['product_name'];
              echo "<option value='$product_id'>$product_name</option>";
            }
            ?>    
        </select>
    </div>