jquery - yii2 kartik select2 插件在模式下不起作用

Question

当我尝试使用 kartik select2 时，下拉列表不出现模态插件。当我在没有模态的情况下使用它时，它就像魅力一样。 这与从插件网站获取的代码相同，但它仍然不起作用。我在浏览器生成的源代码中发现select2插件css和js没有从assets文件夹中加载

这就是 HTML 的样子

   Modal::begin([

    'header' => '<h1>Assign Applicant</h1>',
    'options' => [
        'id' => 'assignApplicantModal',
        'tabindex' => false
    ],
]);
?>


<div class="job-positions-form">

    <?php
    $form = ActiveForm::begin();
    ?>
    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-6">

                <?php
                $data = ArrayHelper::map(Applicant::find()->where('status = :status', [':status' => 'Active'])->all(), 'id', function($model) {
                            return $model->first_name . ' ' . $model->last_name;
                        });

                echo $form->field($assign_model, 'applicant_id')->widget(Select2::classname(), [
                    'data' => $data,
                    'attribute' => 'applicant_id',
                    'options' => ['placeholder' => 'Select an applicant'],
                    'pluginEvents' => [
                        "select2:selecting" => "function() { "
                        . "no_position = $('body').data('no_position');"
                        . "if(no_position>= " . $model->no_of_persons . "){alert('You can select only " . $model->no_of_persons . " applicant(s)');return false;}  }",
                        "select2:select" => "function() { "
                        . "no_position = $('body').data('no_position');"
                        . "$('body').data('no_position',++no_position);}",
                        "select2:unselect" => "function() { "
                        . "no_position = $('body').data('no_position');"
                        . "$('body').data('no_position',--no_position);}",
                    ]
                ]);
                ?>
            </div>
            <div class="col-sm-6">
                <?php echo $form->field($assign_model, 'applicant_pay')->textInput(['maxlength' => true]); ?>
            </div>

            <div class="form-group" style="text-align: center;">
                <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
            </div>
        </div>
    </div>
    <?php ActiveForm::end(); ?>
</div>
<?php
$inlineScript = "$('body').data('no_position'," . count($applicant_id) . ")";
$this->registerJs($inlineScript, \yii\web\View::POS_END, 'my-inline-js');
Modal::end();

从浏览器获取的 HTML:

<div id="assignApplicantModal" class="fade modal" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h1>Assign Applicant</h1>
</div>
<div class="modal-body">


<div class="job-positions-form">

    <form id="w0" action="/staffing/scheduler/web/scheduler/assign_applicant" method="post">
<input type="hidden" name="_schedulerCSRF" value="eEI4TnpSZWcaFnYWNQQcKx0ndC8VEVUyDAl6LAgfBzUTKQw3EBAEEg
==">    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-6">

                <div class="form-group field-assignapplicant-applicant_id required">
<label class="control-label" for="assignapplicant-applicant_id">Applicant</label>
<div class="kv-plugin-loading loading-assignapplicant-applicant_id">&nbsp;</div><select id="assignapplicant-applicant_id"
 class="form-control" name="AssignApplicant[applicant_id]" data-s2-options="s2options_d6851687" data-krajee-select2
="select2_86691c6a" style="display:none">
<option value="">Select an applicant</option>
<option value="12">ASD</option>
<option value="13">qwe</option>
<option value="14">zxc</option>
</select>

<div class="help-block"></div>
</div>            </div>
            <div class="col-sm-6">
                <div class="form-group field-assignapplicant-applicant_pay required">
<label class="control-label" for="assignapplicant-applicant_pay">Applicant Pay</label>
<input type="text" id="assignapplicant-applicant_pay" class="form-control" name="AssignApplicant[applicant_pay
]">

<div class="help-block"></div>
</div>            </div>

            <div class="form-group" style="text-align: center;">
                <button type="submit" class="btn btn-primary">Update</button>            </div>
        </div>
    </div>
    </form></div>

</div>

</div>
</div>
</div>

Answer 1

当模态内容是动态的时，Select2资源将不会被加载，因为最初DOM中没有Select2相关的代码。

1) 您可以通过调用以下方式提前注册 Select2 Assets :

\kartik\select2\Select2Asset::register($this);

然后您需要在每次模式内容更改时通过调用以下内容来初始化 Select2:

$('#field-id').select2();

2) 不要替换模态中的所有 HTML，只需提前渲染它，包括空选择(或一些初始数据)，并且仅在单击不同模态触发器后更改其中的数据。

请参阅相关的 SO 问题:

• Update select2 data without rebuilding the control
• select2 changing items dynamically

并根据Select2 issue .

我上次使用的方式:

$dependentDropdown.find('option:not([value=""])').remove();
$dependentDropdown.select2('val', '');
// This can come from AJAX request
var data = [
    {'id': 1, 'text': 'Some text 1'},
    {'id': 2, 'text': 'Some text 2'}
],
var html = '';
$.each(data, function(key, value) {
    html += '<option value="' + value.id + '">' + value.text + '</option>';
});
$dependentDropdown.append(html);