无法克隆 <select> 并出现“.select2 不是函数”错误

Posted 2023-05-07

【中文标题】无法克隆 <select> 并出现“.select2 不是函数”错误

【英文标题】：Failed to clone <select> with ".select2 is not a function" error

【发布时间】：2020-04-06 15:56:55

【问题描述】：

我正在尝试以动态形式使用Select2（使用jQuery 克隆添加新行），但显然克隆的行与Select2 的功能不相关。收到错误

创建了第二个选择菜单但它产生了错误：

Uncaught TypeError: $(...).select2 is not a function

我正在使用这个 html 部分：

<tbody id="treatmentlist">
    <tr class="itemData">
        <td>
           Form::select('treatments[]',$treatments, null, ['class' => 'form-control treatment', 'placeholder' => 'Select treatment' ])
        </td>
        <td><i class="fas fa-plus-circle" id='addRow'><i class="fas fa-minus-circle" id="delRow"></i></td>
    </tr>
</tbody>

这里是脚本部分：

@section('scripts')

    <script>
        $(".treatment").select2();
        $("#addRow").on('click', function (e) 
            e.preventDefault();
            var $tr    = $(this).closest('.itemData');
            var $clone = $tr.clone();
            $tr.after($clone);
            $(".treatment").select2();
        );
    </script>

@endsection

已经尝试添加select2('destroy')，但没有成功。

任何建议如何使新克隆的行保留 Select2 功能？

【问题讨论】：

看看这个问题：***.com/questions/17175534/…

谢谢，我之前看过那个链接，但现在才明白这个概念。显然这个问题与两件事有关：1）。 double Jquery loading & 2.) 是 select2 destroy 方法的工作方式。

【参考方案1】：

我不能评论低于 50 的声望，希望这个例子对你有所帮助。 解释在这里http://www.phpjavascript.com/2018_03_16_archive.html

$(function () 
    $("#addrow").click(function () 
        var tr = "<tr>" + "<td contenteditable='true'></td>".
                repeat($("#myTable tr:eq(0) td").length) + "</tr>"
        $("#myTable").append(tr);
    );
    $("#addcolumn").click(function () 
        $("#myTable tr").append($("<td contenteditable='true'></td>"));
        $(document).on('click', '.js-del-row', function () 
            $('#myTable').find('tr:last').remove();
        );
        $(document).on('click', '.js-del-column', function () 
            $('#myTable').find('td:last').remove();
        );
    );
);

【讨论】：

感谢您的建议，但问题不在于动态添加/删除行。但更多关于如何在新克隆的行中启用Select2。

尝试$("#treatmentlist").children("select").select2(); 或使用您自己的代码$("#treatmentlist").select2();

【参考方案2】：

显然问题与 Laravel 布局页面 (app.blade.php) 有关。它在调用 bootstrap 时已经加载了 jQuery。所以在 php 中我不需要再次加载 jQuery。

所以修改app.blade.php:

    <!-- Scripts, remove defer from app.js, move selec2.min.js & select2.min.css here -->
    <script src=" asset('js/app.js') "></script>  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

...
...

<!- and adding this part -->  
@yield('scripts')

在 php 方面，Select2 的变化是：

在onClick函数之后，先调用select2('destroy') 然后克隆包含选择元素的行 最终使用 select2() 在最后一个新添加的元素上重新启用 Select2。

@section('scripts')
<script>

$(document).ready(function () 
    $("#contents").children("td").children("select").select2();

    $(document).on('click', '#delRow', function()
        if( $(this).closest('tr').is('tr:only-child') ) 
            alert('cannot delete last row');
        
        else 
            $(this).closest('tr').remove();
        

    );

    $("#addRow").click(function () 
        $("#contents").children("td").children("select").select2("destroy").end();

        // add <tr><td> directive first
        var newRow = '<tr id="contents"><td id="trx"><td> <i class="fas fa-minus-circle" id="delRow">';
        $(newRow).appendTo($("#treatmentlist"));

        // append select component on the last tr
        $('#treatmentlist tr:last').children("td:first-child").append(
            // clone the row and insert it in the DOM
            $("#contents").children("td").children("select").first().clone()
        );
        // enable Select2 on the last newly added element
        $('#treatmentlist tr:last').children("td").children("select").select2();
        // enable Select2 on the select elements
        $("#contents").children("td").children("select").select2();
    );
);
</script>
@endsection

在 HTML 中，应用如下更改：

                <tbody id="treatmentlist">
                    <tr id="contents">
                        <td id="trx">
                            Form::select('treatments[]',$treatments, null, ['class' => 'form-control treatment', 'placeholder' => 'Select treatment' ])
                        </td>
                        <td>
                            <i class="fas fa-plus-circle" id='addRow'></td>
                        </td>
                    </tr>
                </tbody>