首页 > 解决方案 > 如何使用从 mysql 数据库检索到的值填充下拉列表?

问题描述

我有两种形式,一种是添加数据(addData.php),另一种是检索和编辑添加的数据(editData.php)。在addData.php我有三个下拉列表(CountryStateCity),它们是动态的并且相互依赖。每个人在获取数据的数据库中都有自己的表(country_tablestate_tablecity_table。有country_table两个字段,即country_idcountry_name,另外两个表有三个字段state_idcountry_idstate_name。有类似的city_table设置。Country下拉列表由数据库中的数据填充,使用以下 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;
}

}
?>

任何帮助,将不胜感激。

标签: phpjquerymysqldynamicdropdown

解决方案


你有 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>');
}

推荐阅读