yii2 kartik select2插件无法在模态中工作

Question

当我尝试在模态中使用kartik select2插件时，下拉不会显示。当我没有模态地使用它时，它就像魅力一样。 这是从插件网站采取相同的代码，但它仍然无法正常工作。我已经在通过选择2插件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

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

1）你可以通过调用预先登记选择二资产：

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

然后你需要通过调用像初始化选择二在每个模式的内容变化：

$('#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); 

Answer 2

在警予\引导\莫代尔的tabindex="-1"选项防止工作选择二搜索输入。

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

使用jQuery：$('#id_of_the_modal').removeAttr('tabindex');