PHP中的两个依赖下拉列表

Question

I know this is asked question but none has helped me. I have 2 fields product & sub_prod in my tables. I want to show options in sub_prod select according to option selected in product.I tried example described HERE it enables the sub_prod but it doesn't have any values. I have query with MYSQL and it gives values, hence query is correct. I alert(response) it shows me product's select option. I know I have a silly mistake but couldn't figure out.
my php page:

                <select name="product" id="product" class="form-control form-control-sm">
                            <option selected="selected">Select Product </option>

                        <?php
                            $sql = mysqli_query($con, "SELECT DISTINCT product From prod_masteer");
                            $row = mysqli_num_rows($sql);
                            while ($row = mysqli_fetch_array($sql)){
                            echo "<option value='". $row['product'] ."'>" .$row['product'] ."</option>" ;
                            }
                            ?>
                </select>
                           <select name="sub_prod" id="sub_prod" class="form-control form-control-sm" disabled>
                            <option selected="selected">Select Sub product </option>
                           </select>
  <script type="text/javascript">
   $('#product').change(function() {
   var prod = $(this).val();
   //These are to disable enable other select
if( $(this).val() == "Vehicle") {
    $('#make').prop( "disabled", false );
    $('#model').prop( "disabled", false );
    $('#year').prop( "disabled", false );
} else {       
    $('#make').prop( "disabled", true );
    $('#model').prop( "disabled", true );
    $('#year').prop( "disabled", true );
    $('#sub_prod').prop( "disabled", false );

     //document.getElementById("c_name").value=prod;
}
 //////////////////////////////////////////

        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'product='+prod,
            success:function(response){//I tried here with html too
               // alert(response);
                $('#sub_prod').html(response);
                //$('#city').html('<option value="">Select state first</option>'); 
            }
        }); 

});
</script>

my ajaxData.php

<?php
//Include database configuration file
include './db_config.php';

if(isset($_POST["product"]) && !empty($_POST["product"])){
//Get all state data

$query = $db->query("SELECT * FROM prod_masteer WHERE product = ".$_POST['product']." ORDER BY sub_prod ASC");

//Count total number of rows
$rowCount = $query->num_rows;

//Display states list
if($rowCount > 0){
    echo '<option value="">Select sub Product</option>';
    while($row = $query->fetch_assoc()){ 
        echo '<option value="'.$row['sub_prod'].'">'.$row['sub_prod'].'</option>';
    }
}else{
    echo '<option value="">State not available</option>';
}
}
?>

Here is the screenshot of the response I am getting from developer console.