php - 如何使用从 mysql 数据库检索到的值填充下拉列表?
问题描述
我有两种形式,一种是添加数据(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
设置。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;
}
}
?>
任何帮助,将不胜感激。
解决方案
你有 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>');
}
推荐阅读
- javascript - 在 JS 中复制过去时保留样式。(如何从剪贴板获取 stile)
- kubernetes-ingress - 将 nginx-ingress 主机名引用到内部服务
- python - 从 csv 文件创建 mne 数组
- gmail - gcloud 存储上的电子邮件模板图像在 gmail 中不可见
- keras - 损失函数和准确性没有改变 keras
- javascript - JavaScript 如何将欧洲/柏林时区转换为本地时区日期
- android - 使用 Android 应用组件导航预加载导航目的地或异步导航?
- android - FIDO 客户端访问 BLE Authenticator
- lua - 读取文件并使用数据生成变量
- wso2 - WSO2 - 500]:内部服务器错误 添加新 API 时出错 null--1.0.0 - 执行注册表事务操作时出错