I am trying to get country states but it returns null here is my code the adding form

<select class="form-control" id="country-dropdown">
    <option value="">Select Country</option>
    <?php 
    $countries = get_rows('tbl_countries');
    foreach($countries as $country):
        echo '<option value='.$country['id'].'>'.$country['name'].'</option>';
    endforeach;
    ?>
</select>

<select name="state" class="form-control" id="state-dropdown" required="required">
</select>

<select name="city" class="form-control" id="city-dropdown" required="required">
</select>
                                   

Ajax Code to get country states

<script>
$(document).ready(function() {
$('#country-dropdown').on('change', function() {
    var country_id = this.value;
    $.ajax({
        url: "getStates.php",
        type: "GET",
        data: {
            country_id: country_id
        },
        cache: false,
        success: function(result){
            $("#state-dropdown").html(result);
            $('#city-dropdown').html('<option value="">Select State First</option>'); 
            console.log("this is "+ result);
        }
    });
});    
$('#state-dropdown').on('change', function() {
        var state_id = this.value;
        $.ajax({
            url: "getCities.php",
            type: "GET",
            data: {
                state_id: state_id
            },
            cache: false,
            success: function(result){
                $("#city-dropdown").html(result);
            }
        });
    });
});
</script>

code in getStates file

<?php
//connect file
include "../init.php";
$country_id = $_GET['country_id'];
$stmt = $con->prepare("SELECT * FROM tbl_states WHERE country_id = ?");
$stmt->execute(array($country_id));
$rows = $stmt->fetchAll();
foreach($rows as $row){
    echo '<option value='.$row['id'].'>'.$row['name'].'</option>';
}

The result is null if I remove the country_id condition it returns all states not the choosen country states wheres the problem with my code