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资产

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

然后你需要通过调用类似的东西来初始化每个模态内容更改的Select2：

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

2）不是替换模态中的所有HTML，而是提前渲染它，包括空选择（或使用一些初始数据），并且在单击不同的模态触发器后仅更改其内部的数据。 / p>

请参阅此相关的SO问题：

根据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 中，$('#id_of_the_modal').removeAttr('tabindex');选项会阻止 Select2 搜索输入工作。

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

使用JQuery： HAVING

Answer 3

我的问题是我在呈现我的fancybox模态窗口内容的控制器操作中使用了$this->render()，而我本应该使用$this->renderAjax()。现在，它会正确显示选择。

yii2 kartik select2插件在模态中不起作用

3 个答案: