更改第二个下拉列表dynamilly，通过选择第一个下拉项来从mysql数据库中的多个表中获取数据

This question might be asked before by someone. But I didn't find the exact answer for my question. So here is my problem. I have two dropdown select lists in my form. First dropdown select list items retrieve from one table in database. Then second dropdown select list items retrieve from multiple tables in database. I want to dynamically select items from multiple tables in database by first dropdown list. Which means, first dropdown list has items like chair, table, cupboard, etc. Then second dropdown list has items like small chair, big chair, small table, big table, small cupboard, big cupboard, etc. So what I want to do is, when chair selected in first dropdown list then second list must show small chair and big chair only. That each types of items in second list retrieve from different different tables which named chair, table and cupboard. If you have any confusions ask me. Because I'm not good at explaining things. But if you get the idea please help me.

Here is form.php

I was able to get data from db into the first dropdown list without any problem.

//first dropdown list
<div class="form-group">
    <legend for="inputState">Main Inventory Item</legend>
    <select id="main_inventory_items" class="form-control" name="main_inventory_items">
        <option value="">Choose...</option>
    <?php
        $sql_main_inventory = "SELECT * FROM main_inventory_item";
        $main_inv_results = mysqli_query($conn,$sql_main_inventory);

        while ($row = mysqli_fetch_array($main_inv_results)) {
             echo "<option value=".$row['main_inventory_val'].">".$row['main_inventory_item']."</option>";
        }
    ?>
    </select>
</div>

//second dropdown list
<div class="form-group">
    <legend for="inputState">Sub Inventory Item</legend>
    <select id="sub_inventory_items" class="form-control" name="sub_inventory_items">
        <option value="">Choose...</option>
        // There should be some php, jquery and ajax codes
    </select>
</div>