如何使用jquery I制作select2

时间:2018-02-15 19:07:11

标签: jquery yii2 jquery-select2

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

请帮助我。

1 个答案:

答案 0 :(得分:0)

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

我在此分支中包含了个人使用的相关更改(欢迎任何人使用它,但是缩小版尚未更新): 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);
            }
        });
    }