javascript - 在成功的 ajax 上，使用预选的选项值从另一个表中创建一个下拉选择

Question

对于“编辑”模式，我向名为 getSelectedMember.php 的 php 脚本发起一个 ajax 调用，该脚本从表items(表2)。

<?php 
   require_once 'db_connect.php';  

   $memberId = $_POST['member_id']; 

   $sql = "SELECT * FROM items WHERE itemID = $memberId";
   $query = $connect->query($sql);
   $result = $query->fetch_assoc();

   echo json_encode($result);
?>

此 formulation_fk 位于表 items 中，是另一个名为 formulation 的表(表 1)中的选择选项的值。

这是“edit.php”的代码:

<form action=" " method="POST">
   <div>
      <label>Name</label>
      <input type="text"><br>
   </div>
   <div>
      <label>Formulation</label>
      <select id="editFormulation">
      </select>
   </div>
   <button type = "submit">Save changes</button>
</form>

我的问题是在更新单个项目时，如何从编辑表单中的formulation 表中传递select 选项，其中选择选项值 将是表 items 中的 formulation_fk？

这是我的 ajax 调用:

$.ajax({
  url: 'getSelectedMember.php',
  type: 'post',
  data: {
    member_id: itemID
  },
  dataType: 'json',
  success: function(response) {
    $("#editName").val(response.name);
    $("#editFormulation").val(response.formulation_fk);
    $(".editMemberModal").append( ? ? ? ? ? ? )
  }
});

为了澄清我的问题，我们假设要编辑Water，操作流程如下:

1. 点击“水”的编辑按钮。
2. Ajax 调用 getSelectedMember.php 以获取名称(水)和formulation_fk (1)。
3. 响应后，名称字段将输出“Water”和配方字段将输出一个下拉列表选择公式表，其中选项值=“1”

就像下面这张图一样。

我已经尝试解决这个问题有一段时间了，但我非常感谢任何建议或专家帮助。提前致谢。

Answer 1

除了 formulation_fk 之外，PHP 代码还需要返回所有公式的数组。来自items表。

$memberId = $_POST['member_id']; 

$sql = "SELECT * FROM items WHERE itemID = $memberId";
$query = $connect->query($sql);
$result = $query->fetch_assoc();

$sql = "SELECT * FROM formulation";
$query = $connect->query($sql);
$formulations = array();
while ($row = $query->fetch_assoc()) {
    $formulations[] = $row;
}
$result['formulations'] = $formulations;

echo json_encode($result);

然后AJAX代码可以填写<select>在设置其值之前。

success: function(response) {
    $("#editFormulation").empty(); // Clear out previous value
    $.each(response.formulations, function() {
        $("#editFormulation").append($("<option>", {
            value: this.formulationID,
            text: this.formulation_name
        }));
    });
    $("#editFormulation").val(response.valuation_fk);
    $("#editName").val(response.name);
}