php / ajax - 根据另一个下拉列表中的选定选项填充下拉列表

Question

我的数据库中有一个名为“measurements”的表，另一个用于“units”；

“measurements”表有一个 id 和 name 列。 “units”表有一列用于 id、name 和 measure_id。

这个想法是，当用户从下拉列表中选择一个度量时，它将显示另一个下拉列表，其中包含为该度量找到的单位。

我想我必须用“ajax”来做。我已经完成了一些基础知识，从 html 文件中检索信息，但我不知道如何将其与从数据库中检索信息联系起来。

关于测量.php：

  public function display_measurements() {
      include 'includes/db_connection.php';   
          try {

      $sql = "SELECT id, name FROM measurements";

      $results = $conn->prepare($sql);
      $results->execute();
     } catch(PDOException $e) {
        echo 'Error: ' . $e->getMessage() . '<br />';
        return array();
    }
      return $results->fetchAll(PDO::FETCH_ASSOC);
    }

 public function get_units_for_measurement($measurement_id = ':measurement_id') {
       include 'includes/db_connection.php';

       try { 
           $sql = "SELECT measurements.id, units.id, units.name "
               . "FROM measurements "
               . "JOIN units "
               . "ON measurements.id=units.measurement_id WHERE measurements.id=:measurement_id";
           $result = $conn->prepare($sql);
           $result->bindParam(':measurement_id', $measurement_id, PDO::PARAM_INT);
           $result->execute(); 
        } catch(PDOException $e) {
        echo 'Error: ' . $e->getMessage() . '<br />';
        return array();
    }
    return $result->fetchAll(PDO::FETCH_ASSOC);
 }

选择显示测量值：（它是较大表单的一部分，但其余部分无关紧要，因此我添加了表单标签只是为了将您放在我的代码中）：

 <form id="newRecipe" method="POST" action="new_recipe.php">   
 .......
     <label for="measurements" class="required">Measurements</label>
    <select name="measurements" class="selectMeasurement">
        <option disabled selected value> -- select a measurement -- </option>
    <?php
        $measurements = $measurementObj->display_measurements();
        foreach ($measurements as $measurement) {
            echo '<option value="' . $measurement['id'] . '" ';
            echo '>' . $measurement['name'] . '</option>';
        }
    ?>
    </select> 

    //display select values based on measurement_id
    <label for="units" class="required">Units</label>
    <select name="units">
        <option disabled selected value> -- select a unit -- </option>
        <?php
        $units = $measurementObj->get_units_for_measurement($measurement['id']);
        foreach ($units as $unit) {
            echo '<option value="' . $unit['id'] . '" ';
            echo '>' . $unit['name'] . '</option>';
        }
    ?>
    </select> 
  ..... 
</form>

然后，在我的脚本中，我有这个来检索选定的值：

$(document).ready(function() {
    $('#newRecipe').on('change','.selectMeasurement', function(){
      var selectedMeasurementId = this.value;
      return selectedMeasurementId;
    });   
});

但是现在......我不知道该怎么做。目前，我正在返回所选测量 ID 的值，但是如何将该值“发送”到 mysql 查询？所以，我不想要的是必须发送表单或重新加载页面以显示带有单位 ID 的选择；所以....这就是为什么我认为必须使用 ajax 来完成....对吗？

谁能给我一个关于如何进行的提示？

谢谢

Answer 1

我还有一个建议：使用 PHP 完全填充所有内容，然后使用 javascript 监听所选下拉列表的更改并适当地更新选项。