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

Question

好吧，我的问题有点复杂，我无法解决。我已经有两个选择框，其中的选项来自数据库 Mysql 通过 php。就像当我在 Select Box#1 中选择一个选项时，Select Box#2 通过 ajax 进行更新，并显示来自 MYSQL 数据库的 SelectBox#1 的选项。我也可以将这两个值存储在数据库中。

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

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

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

这是我用于前两个选择框的代码:-

HTML 文件顶部

    function load_country()
    {
    $connection = new mysqli("localhost","root","","test");
    $query = "SELECT * FROM country";
    $result = mysqli_query($connection,$query);

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

    }

HTML 文件内

 <form method="post">
       <p> <select name="country" id="country">

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

        <?php echo load_country() ?>

        </select> </p>

        <p> <select name="city" id="city">

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

        </select> </p>

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

        </form> 

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

$(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>

Ajax 使用 PHP 文件更新第二个选择框:-

$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;

Answer 1

首先将 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>

JavaScript:

$(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");
    });

之后，您应该 handle Array input以 PHP 形式的目标代码。 在你的情况下，它应该是这样的:

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

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

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