Question

我对kartik select2小部件有疑问。我正在尝试使用jquery创建动态表单。首先，我在div元素中使用kartik select2创建了两个字段。然后，我克隆了div的所有内容，并将其附加到div中。但是，克隆的select2在单击时不起作用。你可以帮帮我吗？

代码： javascript文件中的代码：

$(document).ready(function(){
    $(document).on("click", "#add-department-btn", function(e){
      e.preventDefault();
      console.log("Clicked");

      var option_name = Math.random()*1000000;
      option_name = parseInt(option_name);
      var id = $(".add-departments-container .copyPattern").data('id');
      var row = $(".add-departments-container .copyPattern").clone().removeClass('copyPattern');

      row.appendTo(".add-departments-container");

      return false;
   });
});

_form.php文件：

<div class="row">
                <a href="javacript:void(0)" id="add-department-btn">+ Qo'shish</a>
            </div>  
            <div class="add-departments-container">
                <?= Yii::$app->controller->renderPartial('department/_department', [
                    'departments' => $departments,
                    'allDepartments' => $allDepartments,
                    'model' => $newDepartments,
                    'university' => $model,
                    'allLevels' => $allLevels,
                    'class' => 'copyPattern'
                    ]); ?>
            </div>

_department.php文件：

<div class="<?= $class ?>" data-id="">
    <div class="row">
        <div class="col-md-5">
            <?= Html::label('Fakultet', 'University['. $id .'][departments]') ?>
            <?= Select2::widget([
                'name' => 'University['. $id .'][departments]',
                'value' => '',
                'data' => $allDepartments,
                'options' => ['placeholder' => 'Select department ...', 'id' => 'department-'.$id],
            ]); ?>
        </div>
        <div class="col-md-5">
            <?= Html::label('Levels', 'University['. $id .'][departments]') ?>
            <?= Select2::widget([
                'name' => 'University['. $id .'][levels]',
                // 'value' => ArrayHelper::getColumn($levels->departments, 'department_id'),
                'data' => $allLevels,
                'options' => ['multiple' => true, 'placeholder' => 'Select states ...', 'id' => 'university-levels-'.$id],
                'pluginOptions' => [
                        'allowClear' => true,
                        'tags'=>true,
                        'maximumInputLength'=>10,
                    ],
            ]); ?>
        </div>
        <div class="col-md-2">
            <a href="javacript:void(0)" id="delete-department-btn">Delete</a>
        </div>
    </div>
</div>

Answer 1

您可以通过一些技巧解决此问题：

1）您可以传递一个ajax操作请求，该请求返回一个html select2小部件，还可以构建一个ajax操作，该操作可以在每个单击按钮上返回表格...在两种情况下都可以使用。此示例来自实际项目（如果为完整的表格页面构建ajax页面，则为该示例）：

public function actionGetCcForm($index)
    {
        $model              = new CalculatorsForm;
        return $this->renderAjax('calculators/_cc_foods_tabular', [
            'index' => $index,
            'model' => $model
        ]);
    }

// view page
<?php
$tabularAjax = Url::toRoute('/nutritionfacts/get-cc-form', true);
$this->registerJs(<<<JS
    $(document).on('click', '#add-new-meal',function(e) {  
        $.ajax({
           url: '$tabularAjax',
           data: {'index': currentIndex},
           success: function(data) {
               $('#_cc_foods_tabular').append(data);
           }
        });
    });
JS
, \yii\web\View::POS_END) ?>

// _cc_foods_tabular - this page will contain form
<div class="col-xs-10 col-md-3 form-group">
        <?php
            echo Select2::widget([
                'model' => $model,
                'attribute' => "[{$index}]food_id",
                'data' => $foodDependanceOfCat,
            ]);
        ?>
    </div>

2）您可以返回select2数据以进行类似render(..., ['select2Data' => $yourSelect2Data])的（渲染操作）查看，然后通过js像

创建SELECT2。

$('#you-news-id-select').select2();

注意：由于每个select2都有一个唯一的ID，因此会发生此问题，该ID已被触发并分配给创建的选定对象。...

Kartik Select2与jQuery附加后无法正常工作

1 个答案: