how to send a value from php select option to another php page using ajax?

Question

i'm creating some website that has 2 select option menues 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

Answer 1

Try your ajax code this way:

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

}
</script>

Answer 2

您必须使用数据：'q ='+ val因为$（this）.val（）在函数内是不可访问的

Answer 3

Try use the value like this,

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

}
</script>

Or else use value like this,

<script> 
      function getCity(val){

        $.ajax({
            type: "POST",
            url: "ajax/city.php",    
            data:'q='+document.getElementById('txtHint').value,
            success: function(data){
            $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background","#FFF");
            }
        });

    }
    </script>