php - 如何使用从 mysql 数据库检索到的值填充下拉列表？

Question

我有两种形式，一种用于添加数据 (addData.php)，另一种用于检索和编辑添加的数据 (editData.php)。在 addData.php 中，我有三个动态的下拉列表(Country、State 和 City)相互依赖。每个人在数据库中都有自己的表，他们从中获取数据(country_table、state_table 和 city_table)。 country_table有两个字段，分别是country_id和country_name，另外两个表有三个字段:state_id， country_id 和 state_name。 city_table 具有类似的设置。 国家/地区 下拉列表使用以下 PHP 代码由数据库中的数据填充:

  <div class="form-group required">
    <label class="control-label col-md-4  requiredField">Country<span class="asteriskField">*</span> </label>
    <div class="controls col-md-6">
      <?php
      $stmt = $country->readCountry();
      $num = $stmt->rowCount();
      if($num>0){
          echo "<select name='country' id='country-list' class='form-control style='margin-bottom: 10px'>";
          echo "<option value='0'>Select Country...</option>";
          while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
              extract($row);
              echo '<option value="'.$row["country_name"].'"data-country_id="'.$row["country_id"].'">'.$row["country_name"].'</option>';
          }
          echo "</select>";
        }
        ?>
    </div>
  </div>

  <div class="form-group required">
    <label class="control-label col-md-4  requiredField">State<span class="asteriskField">*</span> </label>
    <div class="controls col-md-6">
      <select name='state' id='state-list' class='form-control' style='margin-bottom: 10px'>
        <option value='0'>Select State</option>
      </select>

    </div>
  </div>

  <div class="form-group required">
    <label class="control-label col-md-4  requiredField">City<span class="asteriskField">*</span> </label>
    <div class="controls col-md-6">
      <select name='city' id='city-list' class='form-control' style='margin-bottom: 10px'>
        <option value="0">Select City</option>
      </select>
    </div>
  </div>

另外两个下拉列表也由 MySQL 数据库中的数据填充，但这次使用以下 jQuery 代码:

<script>
$(document).ready(function(){

$("#country-list").change(function(){

var country_id=$(this).find(':selected').data('country_id');

var json_url="state_json.php?country_id=" + country_id;

jQuery.getJSON(json_url, function(data){

  $("#state-list").html("");
  $("#state-list").append("<option value='0'>Select State</option>");
  $("#city-list").html("");
  $("#city-list").append("<option value='0'>Select City</option>");

  jQuery.each(data, function(key, val){
      $("#state-list").append('<option value="' + val.state_name + '"data-state_id="' + val.state_id + ' ">' + val.state_name + '</option>')
  });

});

});
$("#state-list").change(function(){

var state_id=$(this).find(':selected').data('state_id');

var json_url="city_json.php?city_id=" + city_id;

jQuery.getJSON(json_url, function(data){

  $("#city-list").html("");
  $("#city-list").append("<option value='0'>Select City</option>");

  jQuery.each(data, function(key, val){
      $("#city-list").append("<option value='" + val.city_name + "'>" + val.city_name + "</option>")
  });

});

});
});
</script>

上面的代码虽然不完美，但对我有用。

现在，问题出在 editData.php 上。假设我使用从 addData.php 收集的数据在数据库中添加了新记录，并且我想使用 edit.php 更新或编辑该数据。在editData.php 中也有三个类似于addData.php 的下拉列表。 第一个问题 是我不能让它像 addData.php 那样工作，即依赖、动态和填充来自数据库的数据。 其次 我想使用 addData.php 使用之前添加的数据预先填充下拉列表。在第一个下拉列表中，国家我可以使用下面的代码使其工作:

  <div class="form-group required input-group">
<label class="control-label col-md-4  requiredField">Country<span class="asteriskField">*</span>  </label>
<div class="controls col-md-6">
  <?php
  $stmt = $country->readCountry();
  $num = $stmt->rowCount();
  if($num>0){
    ?>
      <select name="country" id="country-list" class="form-control" style='margin-bottom: 10px'>
      <option value='0'>Select Country...</option>
      <?php while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
          extract($row); ?>
          <option value="<?php echo $row['country_name'];?>" data-country_id="<?php $row['country_id'];?>"

          <?php
          if($record->country==$row['country_name']) echo 'selected';?>>
           <?php echo $row["country_name"];?> </option>
    <?php  } ?>
      </select>
    <?php } ?>

</div>

这就是 state_json.php 的样子.. 类似于 city_json.php。

<?php

header("Access-Control-Allow-Methods: GET");
header('Content-Type: application/json');


$country_id=isset($_GET['country_id']) ? $_GET['country_id'] : die('Country ID not found.');


include_once 'config/database.php';
include_once 'objects/state.php';


$database = new Database();
$db = $database->getConnection();

$state = new State($db);

$state->country_id=$country_id;
$stmt = $state->readState();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($results);
?>

这就是 state.php 的样子

<?php
class State{


private $conn;
private $table_name = "state_table";

public $state_id;
public $country_id;
public $state_name;

public function __construct($db){
    $this->conn = $db;
}


public function readState(){

    $query = "SELECT state_id, country_id, state_name
            FROM " . $this->table_name . "
            WHERE country_id=:country_id
            ORDER BY state_name";


    $stmt = $this->conn->prepare($query);


    $this->country_id=htmlspecialchars(strip_tags($this->country_id));

    $stmt->bindParam(":country_id", $this->country_id);

    $stmt->execute();

    return $stmt;
}

}
?>

如有任何帮助，我们将不胜感激。

Answer 1

你有 country_id、state_id 和 city_id

不确定这一行是否正确，因为您正在将 city_id 传递给 api

var state_id=$(this).find(':selected').data('state_id');
var json_url="city_json.php?city_id=" + city_id;

在编辑页面加载你的php state_id 和city_id 到js 如下

<script>
var state_id = <?php echo $state_id ; ?>
var city_id= <?php echo $city_id; ?>
</script>

然后在加载 JavaScript 时调用你的 api，如果 state_id = 你的 state_id 使其被选中

if(data-state_id == state_id){
    $("#state-list").append('<option value="' + val.state_name + '"data-state_id="' + val.state_id + ' " selected>' + val.state_name + '</option>');
}
else
{
    $("#state-list").append('<option value="' + val.state_name + '"data-state_id="' + val.state_id + ' ">' + val.state_name + '</option>');
}