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

【问题标题】：How to add select boxes dynamically through add button then save the values in mysql through php如何通过添加按钮动态添加选择框然后通过php将值保存在mysql中
【发布时间】：2019-12-18 19:00:41
【问题描述】：

好的，我的问题有点复杂，我无法解决。我已经有两个选择框，其中的选项来自 Database 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;

【问题讨论】：

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

标签： javascript php jquery mysql ajax

【解决方案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");
    });

之后，您应该在 PHP 表单目标代码中 handle Array input。在你的情况下，它应该是这样的：

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

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

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

【讨论】：