使用jquery附加Kartik Select2后无效-Java 学习之路

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

代码：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>

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]) 然后创建select2 by js like

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

注意：出现此问题是因为每个select2都有一个唯一的id，这个id已被触发并分配给创建的选定....

回复于 2024-04-29T13:39:24+08:00

使用jquery附加Kartik Select2后无效

1 回答

相关问题