使用ajax的相关选择框

Question

我试图让一个国家，州，城市依赖的选择框工作（一旦国家被选中然后州将填充相关的州然后国家被挑选等...）但我认为我的问题有些问题jquery或ajax因为我的状态框不会填充。 如果您能帮助找到代码出错的地方，我将不胜感激。另外我想知道ajax如何回到shippingaddress.php页面。（它是否在成功回调中？）选择框是否需要包含在表单中，还是会发布出来？ 提前感谢您的帮助！

shippingaddress.php

<div class="select-boxes">
<form action="" method="post">
<?php
//Get all country data

$query = $conn->query("SELECT * FROM countries WHERE status = 1 ORDER BY 
country_name ASC");

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

<select name="country_id" id="country">
<option value="">Select Country</option>

<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option 
value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
}
}else{
echo '<option value="">Country not available</option>';
}
?>

</select>
<select name="state" id="state">
<option value="">Select country first</option>
</select>
<select name="city" id="city">
<option value="">Select state first</option>
</select>
</form>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

ajaxData.php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "secure_login";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
//Get all state data
$query = $conn->query("SELECT * FROM states WHERE country_id = 
".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");
//Count total number of rows
$rowCount = $query->num_rows;
//Display states list
if($rowCount > 0){
echo '<option value="">Select state</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
//Get all city data
$query = $conn->query("SELECT * FROM cities WHERE state_id = 
".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC");
//Count total number of rows
$rowCount = $query->num_rows;
//Display cities list
if($rowCount > 0){
echo '<option value="">Select city</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}else{
echo '<option value="">City not available</option>';
}
}
?>