如何用 jquery I 制作 select2

Question

我正在使用 kartik-v/yii2-widget-select2，如下所示：

use kartik\select2\Select2; 

echo $form->field($model, 'state_1')->widget(Select2::classname(), [ 
'data' => $data,     
'options' => [
   'placeholder' => 'Select a state ...'],     
   'pluginOptions' => ['allowClear' => true],
 ]);

在客户端我需要一个加号按钮，通过按下它，用户可以进行新的 select2 输入 我使用 jquery clone(true, true) 函数通过按下加号按钮生成 select2。但在这种情况下，事件无法正常工作。

请帮帮我。

Answer 1

在 yii2-dynamicform (https://github.com/wbraganca/yii2-dynamicform) 中找到了一些用于克隆表单元素的良好基础。但是 select2 部分已经过时，需要一些修复。

我在这个 fork 中加入了供个人使用的相关更改（欢迎任何人使用，但缩小版尚未更新）： https://github.com/probkiller/yii2-dynamicform

但是，如果只是 select2 元素需要克隆，可以考虑使用以下代码：

let $hasSelect2 = $('#yourWrapperForSelect2Clone').find('[data-krajee-select2]');
    if ($hasSelect2.length > 0) {
        $hasSelect2.each(function() {
            let id = $(this).attr('id');
            let configSelect2 = eval($(this).attr('data-krajee-select2'));
            let select2Ops = $(this).attr('data-s2-options');

            if ($(this).data('select2')) {
                $(this).select2('destroy');
            }

            // You can omit this block if you are not using depdrop
            let configDepdrop = $(this).data('depdrop');
            if (configDepdrop) {
                configDepdrop = $.extend(true, {}, configDepdrop);
                $(this).removeData().off();
                $(this).unbind();
                _restoreKrajeeDepdrop($(this));
            }

            $.when($('#' + id).select2(configSelect2)).done(initS2Loading(id, select2Ops));

           // You can omit this block if you are not using depdrop
           if (configDepdrop) {
                let loadingText = (configDepdrop.loadingText) ? configDepdrop.loadingText : 'Loading ...';
                initDepdropS2(id, loadingText);
            }
        });
    }