Javascript 如何通过add按钮动态添加选择框，然后通过php将值保存在mysql中

好吧，我的问题有点复杂，我无法解决。我已经有两个选择框，其中的选项是通过php从数据库Mysql获得的。就像我在SelectBox1中选择一个选项一样，selectbox2通过ajax进行更新，并根据MYSQL数据库中的SelectBox1显示选项。我也能够将这两个值存储在数据库中

问题 : 现在的问题是，我想要一个像addnew这样的按钮，它应该创建两个功能相同的选择框，即我单击addnew按钮的次数。示例：我填充了原来的两个选择框，然后单击“添加新”并生成了两个新的选择框。。我填充它们，然后再次单击“添加新”并生成另外两个选择框，这样总共有6个选择框具有相同的第一个选择框选项，但第二个选择框中的选项可能会根据第一个选择框中选择的选项而有所不同。现在，有两件事我需要帮助：-

一,。如何执行“添加新按钮”功能，生成与原始选择框功能相同的选择框，即从第一个选择框中选择选项，第二个选择框根据第一个选择框中选择的选项自动更新，选项从数据库中获取

二,。如何读取和存储从新字段中选择的值？我能够读取和存储从原来的两个选择框传递的值，但是新的选择框如何？我通过按钮或某种数组等生成的新选择框的任何唯一名称或ID

以下是我用于前两个选择框的代码：-

HTML文件顶端

HTML文件内部

更新第二个选择选项的Jquery/Ajax函数：-

Ajax用于更新第二个选择框的PHP文件：-

---

首先将HTML更改为如下内容，使用类和ID更好地查找对象：

<form method="post">
    <div id="form-area">
        <div class="select-box" id="box_1">
            <p>
                <select class="country" name="country[]">
                    <option value="">Select Country</option>
                            <?php echo load_country() ?>
                </select>
            </p>
            <p>
                <select class="city" name="city[]">

                    <option value="">Select City</option>

                </select>
            </p>
        </div>
    </div>
    <button id="add_new" type="button"> [+] </button>

    <input type="submit" name="submit" value="submit">
</form>

之后，您应该使用PHP表单中的目标代码。 在您的情况下，应该是这样的：

$cities = $_REQUEST['city'];
$cuontries = $_REQUEST['cuontry'];

foreach( $cuontries as $key => $cuontry ) {
 $row[] = [ "cuontry" => $cuontry , "city" => $cities[$key] ];
}

---

此数组与在HTML中使用[+]按钮创建的表单数组相同

第一步是修改逻辑以使用类而不是id。按照web标准，id不应在给定文档中重复。然后你的第二步将是找到每对选择框之间的上下文关系，如果其中一个不存在，就创建它，这样将来的逻辑将很容易理解implement@Taplar老实说，我是javascript、ajax和jquerry方面的新手。我对php很了解，但对于这个功能我完全不了解：这与开发php或任何语言的方法是一样的。你必须把问题分解成更小的步骤，并解决这些步骤。这就是为什么我给了你两个步骤。与您的问题相关的潜在问题很多，这使得问题过于宽泛。然而，我想给你们指出一个起点，至少应该让你们朝着正确的方向前进。

$(document).ready(function(){
 $('#country').change(function(){
  var country_id = $(this).val();
   $.ajax({
    url:"fetch_city.php",
    method:"POST",
    data:{
        "c_id":country_id
    },
    dataType: "text",
    success:function(data)
    {
     $('#city').html(data);
    }
   });
  });
 });
</script>

$output = '';
$query = "SELECT * FROM cities WHERE country_id = '{$_POST["c_id"]}'";

$result = mysqli_query($connection,$query);

$output = '<option value="">Select City</option>';

while($row = mysqli_fetch_array($result))
{
    $output .= '<option value="'.$row["city_id"].'">'.$row["city_name"].'</option>'   ;
}

echo $output;

<form method="post">
    <div id="form-area">
        <div class="select-box" id="box_1">
            <p>
                <select class="country" name="country[]">
                    <option value="">Select Country</option>
                            <?php echo load_country() ?>
                </select>
            </p>
            <p>
                <select class="city" name="city[]">

                    <option value="">Select City</option>

                </select>
            </p>
        </div>
    </div>
    <button id="add_new" type="button"> [+] </button>

    <input type="submit" name="submit" value="submit">
</form>

$(document).on("change", ".country", function() {
    var current_box = $(this).parent().closest('div').attr('id');
    var country_id = $(this).val();
    $.ajax({
        url: "fetch_city.php",
        method: "POST",
        data: {
            "c_id": country_id
        },
        dataType: "text",
        success: function(data) {
            $('#' + current_box).find(".city").html(data);
        }
    });
});
    var id = 1;
    $('#add_new').click(function() {
        id++;
        $(".select-box:last").clone().attr("id", "box_" + id).appendTo("#form-area");
    });

$cities = $_REQUEST['city'];
$cuontries = $_REQUEST['cuontry'];

foreach( $cuontries as $key => $cuontry ) {
 $row[] = [ "cuontry" => $cuontry , "city" => $cities[$key] ];
}