如何用 jquery I 制作 select2

Posted 2023-05-07

【中文标题】如何用 jquery I 制作 select2

【英文标题】：how to make select2 with jquery I

【发布时间】：2018-07-26 15:24:39

【问题描述】：

我正在使用 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。但在这种情况下，事件无法正常工作。

请帮帮我。

【问题讨论】：

如果您说在创建 select2 时未将其应用于 select 标签，通常这意味着您需要将事件重新触发到新创建的 select 标签。通常类似于$('select-new').select2()

【参考方案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);
            
        );
    

【讨论】：

感谢您的帮助，我使用了此代码，但它在 $(this).select2('destroy'); 行中抛出错误“TypeError: this.dataAdapter is null”对于克隆的 select2

上面的代码只是在你克隆并修复了克隆对象的id、名称等之后用于修复验证js的部分。检查这些步骤后错误是否仍然存在。您始终可以使用上述库中的 yii2-dynamic-form.js 作为您的指南