Динамическая выпадающая генерация jQuery

Question

В настоящее время я работаю над некоторыми формами для CRUD. В одной из моих форм я должен иметь возможность добавлять компоненты динамически, поэтому я создал кнопку «Добавить еще», которая генерирует 2 дополнительных поля: одно, где должно появиться выпадающее меню со всеми элементами из моей БД, а другое с поле ввода.

Поле ввода («Количество») работает нормально, но мне не удалось интегрировать данные из БД в сценарий 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>

Я получаю сообщение об ошибке: "Uncaught SyntaxError: неожиданный токен &" в строке "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"}]; "

Последний пробный код:

            <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

Удалите дополнительный класс из прослушивателя 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 2

Попробуйте с этим,

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