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

Question

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

加载

这就是 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

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

1)您可以调用以下方式提前注册Select2资产：

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

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

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

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

查看这个相关的 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);

Answer 2

在 yii\bootstrap\Modal 中，tabindex="-1" 选项阻止 Select2 搜索输入工作。

一个简单的修复可能是删除 tabindex 选项。

与JQuery:$('#id_of_the_modal').removeAttr('tabindex');

Answer 3

我的问题是我在控制器操作中使用了 $this->render() 来呈现我的 fancybox 模态 window 的内容，我应该使用 $this->renderAjax()。现在它可以正确显示 select。

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

yii2 kartik select2 plugin doesnt work in modal

jquery

jquery-select2

bootstrap-modal

yii2