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');