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

问题描述

我正在使用此插件使用动态输入字段 https://www.jqueryscript.net/table/duplicate-resort-rows-dynamic.html 和联系地址我正在使用 select2。一切正常，期待当我尝试添加更多输入字段时。一切都为空，期待联系地址 select2 框。我无法选择

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

这是我的 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,});


});

解决方法

尝试使用此代码：

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

,

<script>
    $('document').ready(function(){
    $(".select2").select2();

    $('.select_all').on("select2:select",function (e) { 
        var data = e.params.data.text;
        if(data=='All'){
        $(".select_all > option").prop("selected","selected");
        $(".select_all").trigger("change");
        }
    });
});
</script>