动态下拉第二个列表未填充

Question

我正在尝试创建一个动态下拉列表，其中城市根据从 MYSQL 数据库中选择的州进行填充。

当我测试它时，第一个下拉列表可以从数据库中很好地填充，同时给出状态名称和 state_id。

第二个下拉列表不填充。我认为这是因为从我正在使用的 fetch.php 文件发送和接收的问题。

我认为 Ajax 是正确的。 Fetch.php 就在我的文件结构中的 index.php 旁边，因此它应该能够找到它。

已尝试调整 fetch.php，使其不必连接到 db，并且只会用文本回显一个简单的选项，但这仍然不会在城市下拉列表中更新。对此新手，任何帮助将不胜感激。

Index.php 中的 HTML 代码：

 <?php require_once('../private/initialize.php'); ?>
 <?php include(SHARED_PATH . '/header.php'); //SHARED_PATH located in initialize.php ?>

        <div id="main-container">
            <form action="" id="cost_form" method="post" onsubmit="return false;">     
                <div id="select-container">
                        <fieldset class="fieldset">
                            <div class="custom-select" >
                              <select id="state"  name="state" class = "form-control" onchange="get_cities(this.value);" >
                                  <option value="" >Select State</option>
                                  <?php $state_set = find_all_states();
                                  while ($state = mysqli_fetch_assoc($state_set)) {
                                      echo '<option value="'.h($state["state_id"]).'">'.$state["state_name"].'</option>';}
                                  ?>
                              </select>
                            </div>
                            <div class="custom-select" >
                              <select id="city" name="city" class="form-control">
                                  <option value="1">Select City</option>
                              </select> 
                            </div>  

                            <div id="total_price"></div>

                        </fieldset>
                </div>
            </form>             
        </div>

 <?php include(SHARED_PATH . '/footer.php'); //SHARED_PATH located in initialize.php ?> 

 <script type="text/javascript">

 function get_cities(val) {
$.ajax({
type: "POST",
url: "fetch.php",
data:'state_id='+val,

success: function(data){
 $("#city").html(data);
 }
 });
 }
 </script>

Fetch.php 代码：

<?php require_once('../private/initialize.php'); ?>

    <?php

    if(isset($_POST['state_id'])) {
        $id = $_POST['state_id'];

        $city_set = find_city_by_id($id);
        while ($city = mysqli_fetch_assoc($city_set)) {
          echo '<option value="'.h($city["city_multiplier"]).'">'.$city["city_name"].'</option>';}
    }

    ?>

查询函数，通过 Initialize.php 访问：

   <?php 

    function find_all_states() {
    global $db;

    $sql = "SELECT * FROM states ";

    $result = mysqli_query($db, $sql);
    confirm_result_set($result);
    return $result;
}

function find_city_by_id($id) {
    global $db;

    $sql = "SELECT * FROM cities WHERE state_id ='".$id."'";

    $result = mysqli_query($db, $sql);
    confirm_result_set($result);
    return $result;
}
?>

数据库，通过Initialize.php访问：

<?php 

    require_once ('db_credentials.php');

    function db_connect() {
        $connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
        confirm_db_connect();
        return $connection;
    }

    function db_disconnect($connection) {
        if(isset($connection)) {
            mysqli_close($connection);
        }
    }

    function confirm_db_connect() {
        if(mysqli_connect_errno()) {
            $msg = "Database connection failed: ";
            $msg .= mysqli_connect_error();
            $msg .= " (" . mysqli_connect_errno() . ")";
            exit($msg);
        }
    }

    function confirm_result_set($result_set) {
    if (!$result_set) {
        exit("Database query failed.");
    }
}

?>

Answer 1

可能是因为这个：

$.ajax({
type: "POST",
url: "fetch.php",
data:'state_id='+val,

success: function(data){
 $("#city").html(data);
 }
 });

据我所知，数据应该这样传递：

data: { 
        'state_id': val
    }

尝试在if(isset($_POST['state_id'])) 之后执行echo"TEST"; 以查看问题是您的jQuery 还是其他问题。