Динамический выпадающий список не работает.Мой выпадающий список не заполняется после выбора одного поля

Question

Я запускаю свой проект на WAMP.

У меня есть база данных с 2 таблицами: страна и штат со значениями поля id, страна и идентификатор, country_id (идентификатор таблицы стран), штат соответственно.

Я создал index.php, db.php, ajax.js, get-states.php. мой выпадающий список после выбора страны не работает.

Я также опубликовал свой код. Где проблема возникает? любезно помогите.

Я разместил код файлов: index.php, ajax.js, get-states.php.

index.php

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<?php include("db.php");?>
<div class="">
    <label>Country :</label>
    <select name="country" id="country">
      <option value=''>------- Select --------</option>
      <?php 
      $sql = "select * from `countries`";
      $res = mysqli_query($con, $sql);
      if(mysqli_num_rows($res) > 0) {
        while($row = mysqli_fetch_object($res)) {
          echo "<option value='".$row->id."'>".$row->country."</option>";
        }
      }
      ?>
    </select>

    <label>State :</label>
    <select name="state" id="state"><option>------- Select --------</option></select>
  </div>

ajax.php

$(document).ready(function() {
  $("#country").change(function() {
    var country_id = $(this).val();
    if(country_id != "") {
      $.ajax({
        url:"get-states.php",
        data:{c_id:country_id},
        type:'POST',
        success:function(response) {
          var resp = $.trim(response);
          $("#state").html(resp);
        }
      });
    } else {
      $("#state").html("<option value=''>------- Select --------</option>");
    }
  });
});

получить-states.php

<?php include("db.php"); ?>
<?php
if(isset($_POST['c_id'])) {
  $sql = "select * from `states` where `country_id`=".mysqli_real_escape_string($con, $_POST['c_id']);
  $res = mysqli_query($con, $sql);
  if(mysqli_num_rows($res) > 0) {
    echo "<option value=''>------- Select --------</option>";
    while($row = mysqli_fetch_object($res)) {
      echo "<option value='".$row->id."'>".$row->state."</option>";
    }
  }
} else {
  header('location: ./');
}
?>

Answer 1

попробуйте это:

// html

<select name="country"
                id="country"
                onChange="getState(this.value);">
                <option value disabled selected>Select Country</option>
             if(mysqli_num_rows($res) > 0) {
        while($row = mysqli_fetch_object($res)) {
          echo "<option value='".$row->id."'>".$row->country."</option>";
        }
      }
      ?>
    </select>

// ajax

function getState(val) {
    $.ajax({
    type: "POST",
    url: "get-State.php",
    data:'country_id='+val,
    success: function(data){
        $("#state").html(data);
    }
    });
}