Question

我目前正在为CRUD设计某些表格。在我的一种表单中，我必须能够动态添加组件，因此我创建了一个“添加更多”按钮，该按钮会额外产生2个字段，其中一个下拉菜单应与数据库中的所有项目一起出现，而另一个包含输入字段。

输入字段（“ Amount”）工作正常，但是当我从数据库中添加值时，我无法设法将数据库中的数据集成到Jquery脚本中以生成额外的字段，然后单击“添加”更多”按钮不起作用。第二个下拉菜单（“ Tube”）的值经过硬编码，仅用于测试布局。关于如何解决这个问题的任何想法？

<div class="table-responsive">
  <table class="table table-bordered" id="dynamic_field">
    <tr>
      <td>
        <select class="form-control" name="ProductGroup" id='Product__field'>
          <?php
              $sql = DB::connection('log_inv')->table('logisticsinv')->select('id', 'Product_Name')->get();
              foreach ($sql as $row) {
                echo "<option value='".$row->id."'>" . $row->Product_Name. "</option>";
              }
              ?>
        </select>
      </td>
    </tr>
    <tr>
      <td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td>
      <td><button type="button" name="add" id="add" class="btn btn-success btn_add">Add More</button></td>
    </tr>

这是我的jquery代码，因此每当我按“添加更多”时，都会生成一个新的下拉菜单和一个输入字段

<script type="text/javascript">
  $(document).ready(function() {
    var postURL = "<?php echo url('addmore'); ?>";
    var i = 1;

    var array = {{ json_encode(DB::connection('log_inv')->table('logisticsinv')->select('id', 'Product_Name')->get()) }};
    $('#add').on('click', '.btn_add', function() {
         i++;
         $('#dynamic_field').append('<tr id="row' + i + '" class="dynamic-added"><td><select id="select_'+i+'"class="form-control" name="Item[]"></select><tr id="row' + i +
           '" class="dynamic-added"></td><td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
       });
    array.forEach(function(row){
        $('#select_'+i).append('<option value="'+row["id"]+'" >'+row["Product_Name"]+'</option>');
    });
          $(document).on('click', '.btn_remove', function() {
          var button_id = $(this).attr("id");
          $('#row' + button_id + '').remove();
        });
</script>

我在“ var array = [{“ id”：24，“ Product_Name”：“ B2C Kit”}，{“ id”：25，“ Product_Name行上看到错误：” Uncaught SyntaxError：Unexpected token＆“ “：” B2B“}，{” id“：26，” Product_Name“：” B2B Kit“}，{” id“：27，” Product_Name“：”拭子“}，{” id“：28，” Product_Name“ ：“ Tube”}];“

上次尝试的代码：

            <div class="table-responsive">
              <table class="table table-bordered" id="dynamic_field">
                <tr>
                  <td>
                    <select class="form-control" name="ProductGroup" id='Product__field'>
                      <?php
                          $sql = DB::connection('log_inv')->table('logisticsinv')->select('id', 'Product_Name')->get();
                          foreach ($sql as $row) {
                            echo "<option value='".$row->id."'>" . $row->Product_Name. "</option>";
                          }
                          ?>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td>
                  <td><button type="button" name="add" id="add" class="btn btn-success btn_add">Add More</button></td>
                </tr>
              </table>
              <div class="row">
                <div class="col-md-12"></div>
                <div class="form-group col-md-12">
                  <button type="submit" class="btn btn-success" style="margin-left:38px">Add Kit type</button>
                </div>
              </div>
            </div>


    <script type="text/javascript">
  $(document).ready(function() {
    var postURL = "<?php echo url('addmore'); ?>";
    var i = 1;

    var array = [<?php DB::connection('log_inv')->table('logisticsinv')->select('id', 'Product_Name')->get() ?>];
    array.forEach(function(row){
      $('#select_'+i).append('<option value="'+row["id"]+'" >'+row["Product_Name"]+'</option>');
    });
    $('#add').on('click', function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '" class="dynamic-added"><td><select id="select_' + i + '"class="form-control" name="Item[]"></select><tr id="row' + i +
      '" class="dynamic-added"></td><td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
  });
});

    $(document).on('click', '.btn_remove', function() {
      var button_id = $(this).attr("id");
      $('#row' + button_id + '').remove();
    });
    </script>

Answer 1

尝试一下，

<td><button type="button" name="add" id="add" class="btn btn-success btn_add">Add More</button></td>
<div class="field_wrapper">
     {{-- Extra fields when User click on add --}}
</div>

当用户单击该特定按钮时，您必须调用脚本，

$(document).ready(function () {
            var maxField = 10; //Input fields increment limitation
            var addButton = $('.btn_add'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper
            var fieldHTML = '<div class="form-group">' +
                '<a href="javascript:void(0);" class="remove_button float-right">&nbsp;<i class="fa fa-minus"></i></a>' +
                '<label for="field-1" class="control-label">Extra Ingredients</label><br>' +
                // Here put your logic for dropdown and other field
                '</div>'; //New input field html
            var x = 1; //Initial field counter is 1

            //Once add button is clicked
            $(addButton).click(function () {
                //Check maximum number of input fields
                if (x < maxField) {
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML); //Add field html
                }
            });

            //Once remove button is clicked
            $(wrapper).on('click', '.remove_button', function (e) {
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
        });

希望这会有所帮助：）

Answer 2

将多余的类从onclick侦听器$('#add').on('click', '.btn_add', function() {移至$('#add').on('click', function() {

您还可以将$(document).on('click', '#add, .btn_add', function() {用于多个选择器。

    $(document).ready(function() {
      var postURL = "<?php echo url('addmore'); ?>";
      var i = 1;

      var array = [{
        "id": 24,
        "Product_Name": "B2C Kit"
      }, {
        "id": 25,
        "Product_Name": "B2B "
      }, {
        "id": 26,
        "Product_Name": "B2B Kit "
      }, {
        "id": 27,
        "Product_Name": "Swab"
      }, {
        "id": 28,
        "Product_Name": "Tube"
      }]

      $('#add').on('click', function() {
        i++;
        $('#dynamic_field').append('<tr id="row' + i + '" class="dynamic-added"><td><select id="select_' + i + '"class="form-control" name="Item[]"></select><tr id="row' + i +
          '" class="dynamic-added"></td><td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

        array.forEach(function(row) {
          $('#select_' + i).append('<option value="' + row["id"] + '" >' + row["Product_Name"] + '</option>');
        });
      });
      $(document).on('click', '.btn_remove', function() {
        var button_id = $(this).attr("id");
        $('#row' + button_id + '').remove();
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-bordered" id="dynamic_field">
    <tr>
      <td>
        <select class="form-control" name="ProductGroup" id='Product__field'>
          <?php
              $sql = DB::connection('log_inv')->table('logisticsinv')->select('id', 'Product_Name')->get();
              foreach ($sql as $row) {
                echo "<option value='".$row->id."'>" . $row->Product_Name. "</option>";
              }
              ?>
        </select>
      </td>
    </tr>
    <tr>
      <td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td>
      <td><button type="button" name="add" id="add" class="btn btn-success btn_add">Add More</button></td>
    </tr>
    </table>
    </div>

Answer 3

我找到了解决问题的方法，谢谢您的帮助！

        <div class="table-responsive">
          <table class="table table-bordered" id="dynamic_field">
            <tr>
              <td>
                <select class="form-control" name="ProductGroup" id='Product__field'>
                  <?php
                      $sql = DB::connection('log_inv')->table('logisticsinv')->select('id', 'Product_Name')->get();
                      foreach ($sql as $row) {
                        echo "<option value='".$row->id."'>" . $row->Product_Name. "</option>";
                      }
                      ?>
                </select>
              </td>
            </tr>
            <tr>
              <td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td>
              <td><button type="button" name="add" id="add" class="btn btn-success btn_add">Add More</button></td>
            </tr>
          </table>
          <div class="row">
            <div class="col-md-12"></div>
            <div class="form-group col-md-12">
              <button type="submit" class="btn btn-success" style="margin-left:38px">Add Kit type</button>
            </div>
          </div>
        </div>
</center>

</form>
</div>
</div>

<script type="text/javascript">
var array = {!!json_encode($sql)!!};
$(document).ready(function() {
  var postURL = "<?php echo url('addmore'); ?>";
  var i = 1;

  $('#add').on('click', '.btn_add', function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '" class="dynamic-added"><td><select id="select_' + i + '"class="form-control" name="Item[]"></select><tr id="row' + i +
      '" class="dynamic-added"></td><td><input type="text" name="Amount[]" placeholder="Amount" class="form-control" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

    array.forEach(function(row) {
      $('#select_' + i).append('<option value="' + row["id"] + '" >' + row["Product_Name"] + '</option>');
    });
  });
  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });
});
</script>

动态下拉生成jQuery

3 个答案: