在 PHP 中添加动态下拉选择字段

Question

我有一个包含三个选项的依赖下拉菜单。所有选项都是从我的数据库中的两个单独的表中获取的。一个叫“团队”，另一个叫“团队成员”。

团队：

id	姓名
1	母语
2	老板
3	CGY
4	电音

团队成员：

id	team_id	玩家
1	1	铃木
2	1	达赫
3	2	伯杰龙
4	2	马尔尚
5	3	伊金拉
6	3	塔内夫
7	4	麦克大卫
8	4	海曼

选项 #1，用户选择团队。此数据是从我的数据库中名为“团队”的表中获取的。

然后根据选择的团队，选项 #2 和选项 #3 都会填充玩家以供选择。他们都依赖于选项#1（团队）。对于这些，他们都从数据库中的“teamplayers”表中获取数据。

这是一张图片，显示了如果我选择 MTL 例如：

我已经通过使用 Ajax 调用和显示选项 #2 和 #3 的“玩家”表中的数据来实现它的工作。这发生在我的 onchange 事件发生在 jquery 之后，当用户第一次从选项 #1 中选择一个选项时触发。

这很好，但是我希望能够在用户单击“添加更多”时动态添加更多行。然后当他们点击“提交”时，所有这些记录都会发布到我的数据库中。

我曾尝试使用 jquery 克隆它，但除了第一行之外，它不会将实际数据保存到我的数据库中。我也研究过在 jquery 中使用 append 函数，但我很难完成这项工作。

有没有一种简单干净的方法来实现我想要做的事情？

Index.php

<form method="post" id="formdata">
    <div class="form-container">
        <div class="container">
            <label></label>
            <select name="team" id="team" class="dropdown">
                <option value=""> Select Team</option>
                <?php
                $query = "select * from team";
                $result = mysqli_query($con, $query);
                    while ($row = mysqli_fetch_assoc($result)) {
                        $teamid = $row['id'];
                        $teamname = $row['name'];
                
                       echo '<option value="'.$teamid.'">'.$teamname.'</option>';
                    }
                ?>
            </select>
        </div>
        <div class="container">
            <label for="team"></label>
            <select name="goal" id="goal" class="dropdown">
                <option type="text" value="">select Goal</option>
            </select>
        </div>
        <div class="container">
            <label for="team"></label>
            <select name="assist" id="assist" class="dropdown">
                <option type="text" value="">select Assist</option>
            </select>
        </div>
       
        <div class="container">
    
              </div>
              <button type="submit" name="submit" class="dropdown button">Submit</button>
                </div>
    </form>
 </div>
 <button type="button" name="add" id="add" class="dropdown add button">Add More</button>

ajax.js

$(document).ready(function () {
  $("#team").on("change", function () {
    var teamz = this.value;
    $.ajax({
      url: "response.php",
      type: "POST",
      data: {
        teamz: teamz,
      },
      cache: false,
      success: function (result) {
        $("#goal").html(result);
        $("#assist").html(result);
      },
    });
  });
});

response.php

<?php
include 'connect.php';
$teamz = $_POST["teamz"];
$sql="SELECT * FROM teamplayers WHERE team_id=$teamz";
$result = mysqli_query($con, $sql);
?>
<option value="">Select Player</option>
<?php
while ($row = mysqli_fetch_array($result)) {
    ?>
    <option value="<?php echo $row["id"]; ?>"><?php echo $row["player"]; ?></option>
    <?php
}
?>