How to send a value from PHP select option to another PHP page using ajax?

I'm creating some web site that has two select option menus the first one to select country, second for state and there's a search bar for live search using ajax. The states menu is filled from some PHP file because I send the selected country to it using ajax.

What I want is to send the ID of the selected option from the states menu to another PHP page using ajax so that if I select ALABAMA state and click on the search bar and start typing some letters of some Alabama city it recommends only the cities of Alabama

Here's my ajax code:

<script> 
function getCity(val){
            //var vall = document.getElementById('gadget').value;
    $.ajax({
        type: "POST",
        url: "ajax/city.php",    
        data:'q='+$(this).val(),
        success: function(data){
        $("#suggesstion-box").show();
                    $("#suggesstion-box").html(data);
                    $("#search-box").css("background","#FFF");
        }
    });
    
}
</script>

and here's the states menu :

  <select class="form-control" id="txtHint" style="width:120%;" onchange="getCity(this.value)">
     <option value="-1"> Select State &nbsp;&nbsp; </option>
</select>

and here's the code in the AJAX file :

<?php
if (!empty($_POST["q"])) {
  if(!empty($_POST["keyword"])) {
    $query ="SELECT `city`,`state_code` FROM `cities` WHERE `S_code` = '".$_POST["q"]."' AND `city` LIKE '" . $_POST["keyword"] . "%' ORDER BY city LIMIT 0,6";
    
    $result = mysql_query($query) ;
        if(!empty($result)) {
?>

<ul id="country-list">

<?php
            while($row = mysql_fetch_array($result)) {
?>

<li onClick="selectCountry('<?php echo $row["city"]; ?>');"><?php echo $row["city"]." ,".$row["state_code"]; ?></li>

<?php 
            } 
?>
</ul>
<?php
        } 
     } 
  }
?>

The q value seems to be empty.