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

【问题标题】：How to use select2 in Jquery Dynamic Input Field?如何在 Jquery 动态输入字段中使用 select2？
【发布时间】：2021-04-11 22:16:15
【问题描述】：

我正在使用此插件使用动态输入字段 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,
    });


});

【问题讨论】：

我相信您需要销毁并读取 select 2 ->select2("destroy") ，然后 ->select2() ，您可以先尝试不销毁，当然这应该在克隆功能中（当你按下添加按钮时）。
我应该如何以及在哪里写作？请帮忙。我被击中了 4 天
你有一个函数，当你按下这个函数内的 + 按钮时，你需要克隆所有输入，你需要先销毁 select2，然后克隆它，然后重新应用 select2()，你能发布创建新行的函数，这样我就可以准确地告诉你在哪里做。
根据您帖子中的链接，您可以添加 6. 回调函数。在这里面你需要使用 beforeAdd 回调销毁 select2() 并使用 afterAdd 回调重新启动 select2()。
我没有查过，但我也在一个项目中使用了 select2 库。缓存设置默认为 false。您已将其设置为 true。这难道不是你的问题的原因吗？

标签： jquery laravel jquery-select2

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

【讨论】：

【解决方案2】：

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

【讨论】：