国家 州和城市 下拉

Question

我是 Ajax 和 PHP 的新手，我遇到了州和城市动态下拉的问题。 尽管我已经在 stackOverflow 中检查了很多答案，但我无法清楚地了解我们应该如何成功编码以获得所需的结果。

问题：无法获得城市、国家和州的下拉值，但已成功填充。

country_back.php [ Dynamically generates a drop down for states using country_id ]

<?php 

 $con_id=$_POST['id'];


 $con=mysqli_connect("localhost","root","","countries");
 $data=mysqli_query($con,"select * from states where country_id='$con_id' ");
 echo "<select id='st'>";
 while($row=mysqli_fetch_array($data))
   {
     echo "<option value=".$row['id'].">".$row['name']."</option>"; 
   }
 echo "</select>";



?>

ajax file

$("#st").change(function(){
        var s=$(this).val();
        alert(s);   //no value being shown with alert.
        $.ajax=({
            url:"state_back.php",
            method:"post",
            data:{stid:s},
            dataType:"html",
            success:function(strMsg){
                $("#city").html(strMsg);

                }

            })

        })

HTML Form

<form method="post">

<div id="city">
<select>
<option>Cities</option>
</select>
</div>
</form>

state_back.php Dynamically generates a drop down for cities using state_id

<?php

$stid=$_POST['stid'];

$con=mysqli_connect("localhost","root","","countries");
$data=mysqli_query($con,"select * from cities where state_id='$stid' ");
echo "<select>";
while($row=mysqli_fetch_array($data))
{
    echo "<option>".$row['name']."</option>";
}
echo "</select>";


?>

Answer 1

更改您的ajax代码：

  $(document).on('change', '#st', function(e){ var s=$('#st').val(); alert(s); //no value being shown with alert. $.ajax({ url:"state_back.php", method:"post", data:{stid:s}, dataType:"html", success:function(strMsg){ alert(strMsg); $("#city").html(strMsg); } }); }); 

Answer 2

而不是var s=$(this).val(); 线尝试

var s=$('#st option:selected').val();

警报；

Answer 3

No need of api just import sql and use this simple code.This is fetching details 
from sql database (Only contain indian states and cities).
Most of the cities are available but not sure about all the cities but with this
you can get idea of using select tag.
sql link->https://github.com/Pankaj-singh-tech/indiancities/tree/main

    <form method="post">
    <select name="state" id="state" onchange="form.submit()" >
        <?php
        echo "<option value=''>SELECT STATE</option>";
        $sql="SELECT * FROM state";
        $result=mysqli_query($conn,$sql);
        if(!$result){
            echo "<option value=''>failed to fetch sates</option>";
        }
        while($row=mysqli_fetch_array($result)){
            echo "<option value='$row[state_id]' 
id='state$row[state_id]'>$row[state_title]</option>";
        }
        if(isset($_POST['state'])){
            $state_id=$_POST['state'];
        }
        ?>
    </select>
    <select name="district" id="district" onchange="form.submit()" >
    <?php
        echo "<option value=''>SELECT DISTRICT</option>";
        $sql2="SELECT * FROM district WHERE state_id='$state_id'";
        $result2=mysqli_query($conn,$sql2);
        if(!$result2){
            echo "<option value=''>failed to fetch district</option>";
        }
        while($row2=mysqli_fetch_array($result2)){
            echo "<option value='$row2[district_id]' 
id='district$row2[district_id]'>$row2[district_title]</option>";
        }
        if(isset($_POST['district'])){
            $district_id=$_POST['district'];
        }
        ?>
    </select>
    <select name="city" id="city" onchange="form.submit()" >
    <?php
        echo "<option value=''>SELECT CITY</option>";
        $sql3="SELECT * FROM city WHERE state_id='$state_id' AND 
district_id='$district_id'";
        $result3=mysqli_query($conn,$sql3);
        if(!$result3){
            echo "<option value=''>failed to fetch city</option>";
        }
        while($row3=mysqli_fetch_array($result3)){
            echo "<option value='$row3[city_id]' 
id='city$row3[city_id]'>$row3[city_title]</option>";
        }
        if(isset($_POST['city'])){
            $city_id=$_POST['city'];
        }
        ?>
    </select>
</form>
<script>
    document.getElementById('<?php echo "state$state_id"; ?>').selected = 
'selected';
    document.getElementById('<?php echo "district$district_id"; ?>').selected = 
'selected';
    document.getElementById('<?php echo "city$city_id"; ?>').selected = 
'selected';
</script>