國家 州和城市 下拉

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>