动态填充下拉列表，基于php中第一个列表的选定值

I have a small PHP page which contains two drop down lists

I need to populate the second one according to the result selected in the first drop down list. Is this possible? In other words I need to use the value selected from the first drop down list and use it in the dB query used to populate the second drop down list (but this should be populated upon selection of the first drop down list.

If this is possible any hints please? (you can assume that I am able to populate the first drop down list from the dB)

connecting with db

       <?php
        include ("db_connect.php");
        ?>

javascript:

       function abc()
        {
            var val = document.getElementById('customer_type').value;
            self.location='add.php?customer_type=' + val ;
        }

PHP

     <div class="heading">
            <h1>Add Products</h1>
        </div>

        <div class="content">
            <form action="" method="post" enctype="multipart/form-data">        
                <span class="text_line">Select Customer Type:</span>
                    <select name="customer_type" id="customer_type" onChange="abc()" style="line-height: 30px;
        height: 30px; width:18%;">
                    <option class="tfield"> Customer Type </option>
                        <?php
                        $result = mysqli_query($con, "SELECT * FROM cust_type");
                        while($row = mysqli_fetch_array($result))
                        {
                            $cust_name = $row['customer_type'];
                            echo "<option value='$cust_name'> $cust_name </option>";                    
                        }
                        ?>
                    </select><br />


                <span class="text_line">Select Shoes Type:</span>
                    <select name="shoe_type" style="line-height: 30px;
        height: 30px; width:18%;">
                    <option class="tfield"> Shoes Type </option>
                        <?php
                        $result1 = mysqli_query($con, "SELECT * FROM shoes_type");
                        while($row1 = mysqli_fetch_array($result1))
                        {
                            $shoesid = $row1['gender_id'];
                            $shoes_cat = $row1['shoes_category'];
                            echo "<option value= '$shoesid'> $shoes_cat </option>";
                        }
                        ?>
                    </select><br />           

                    <span class="text_line">Select Image:</span>
                        <input type="file" name="upload" style="line-height: 30px;
        height: 30px; width:18%; color:#fff;"/><br />

                    <span class="text_line">Price:</span>
                        <input type="text" name="price" class="tfield"/><br />

                    <span class="text_line">Description:</span>
                        <textarea name="descrip" cols="25" class="tfield"></textarea><br />

                    <div class="button1">
                        <input type="submit" name="submit" value="Submit" class="sign" />
                   </div>
            </form>
        </div>


        <?php
        if(isset($_POST['submit']))
        {
            $cust_type = $_POST['customer_type'];
            $prod_price = $_POST['price'];
            $shoe_img = $_FILES["upload"]["name"];
            $prod_descrip = $_POST['descrip'];
            $shoeid = $_POST['shoe_type'];

            if($cust_type == "" || $prod_price == "" || $shoe_img == "" || $prod_descrip == "")
            {
        ?>
               <!-- <div style="color:#FFF; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; margin-top:2%;">-->
                <?php 
                echo "Please fill all the fields";?>
                </div>
                <?php
            }
            else
            {
                $result2 = mysqli_query($con, 
                "SELECT * FROM shoes_type WHERE shoes_id = '$shoeid'");

                while($row2 = mysqli_fetch_array($result2))
                {
                    $shoesid = $row2['shoes_id'];
                    $shoetype = $row2['shoes_category'];
                }
                $sql = mysqli_query($con, "INSERT INTO 
        product(shoes_id,customer_type,shoe_type,shoe_price,image,description)
        VALUES('$shoesid','$cust_type','$shoetype','$prod_price','$shoe_img','$prod_descrip')");
                ?>
                <!--<div style="color:#FFF; text-align:center; font-size:20px; font-family:Arial, Helvetica, sans-serif; margin-top:5%;">-->
            <?php
                echo "Data inserted !!!";
            ?>
            <?php   
                //echo "<meta http-equiv='Refresh' content='1'; URL='index.php?id=addproduct'>";
            ?>

            </div>
        <?php
            }//else loop ends

        }//if loop ends

        ?>

I am not well experienced in ajax and jquery. Please suggest solution in javascript and php