jquery - 如何在 Jquery 动态输入字段中使用 select2？

Question

我正在使用此插件 https://www.jqueryscript.net/table/duplicate-resort-rows-dynamic.html使用动态输入字段，对于联系地址，我正在使用 select2。一切正常，期望当我尝试添加更多输入字段。一切都是空的，除了联系人地址选择 2 框。我也不能选择

这是当我尝试在编辑表单中添加更多输入字段时。所有联系人姓名和联系人电话和电子邮件都为空，除了联系人地址字段，我无法选择地址。

这是我的 html 样子

   @foreach($contacts as $key => $contact)
              
            <tr>
                <td>
                  <input type="text" name="contact_name[]" value="{{ $contact->contact_name ?? null}}"
                       class="form-control" placeholder="{{ __('Contact Name') }}">
               </td>
               <td>
                <input type="text" name="contact_phone[]"  value="{{ $contact->contact_phone ?? null }}"
                           class="form-control" placeholder="{{ __('Contact Phone') }}">
                
                </td>
                <td>
                 <input type="text" name="contact_email[]"  value="{{ $contact->contact_email ?? null  }}"class="form-control" placeholder="{{ __('Contact Email') }}">
                </td>
                <td>
               
                    <select name="contact_address[]" data-selected="{{ old('contact_address',  $contact->contact_address ?? null) }}"
                            class="contact_address form-control" >
                     @foreach($addresses as $address)
                        <option value="{{$address->id}}" @if($address->id==$contact->contact_address) selected @endif>{{$address->name}},{{$address->district}}</option>
                        @endforeach
                    </select>
                
            </td>
                <td>
                <button class="btn btn-danger btn-sm" data-remove >
                    <i class="ni ni-fat-delete"></i>
                </button>
                <button class="btn btn-primary btn-sm"  data-add>
                    <i class="ni ni-fat-add"></i>
                </button>

            </td>
            </tr>
            @endforeach

我的脚本文件看起来像这样

$(document).ready(function() {
    $("tr select[name='contact_address[]']").select2({

        theme: "classic",
        allowClear: true,
        cache: true,
    });


});

标签： jquerylaraveljquery-select2

Answer 1

尝试使用此代码：

$(function() {
  $('table[data-dynamicrows]').dynamicrows({
    beforeAdd: function($row) {
     
      $row.find('select.contact_address').select2("destroy");
    },
    afterAdd: function($row) {
      $row.find('select.contact_address').select2();
    }
  });
});