Select2 after setting initial value, adding an another value changes the text of first value

Question

I'm rendering select2 using karthik yii2 widget. I'm using the updated version. I tried to set initial value using initSelection, it works fine. But when i try to add an another value it changes the pre selected value to ID which was set through initSelection.

<?php
$initScript = <<< SCRIPT
function (element, callback) { 
  var id = \$(element).val();
  if (id !== "") {
    var url = "{$url}";
    \$.ajax(url.replace('idreplace', id), {dataType: "json"}).done(
      function(data) {
        callback(data.results);
      });
  }
}
SCRIPT;
 echo Select2::widget([
                          'language' => 'en',
                          'name' => 'to',
                           'value' => ['1'],
                          'options' => [
                            'placeholder' => 'Choose...',
                            'id' => "to",
                            'multiple' => true,
                            'data-validation'=>'required',
                          ],
                          'pluginOptions' => [
                                      'language' => [
                                         'errorLoading' => new JsExpression("function () { return 'Waiting for results...'; }"),
                                                    ],
                            'allowClear' => true,
                            'minimumInputLength' => 3,
                            'multiple' => true,
                            'ajax' => [
                              'url' => $url,
                              'dataType' => 'json',
                              'tags' => true,
                              'data' => new JsExpression('function(params) { return {search:params.term}; }'),
                              'results' => new JsExpression('function(data,page) {return { results:data.results }; }'),
                            ],
                            'initSelection' => new JsExpression($initScript)
                          ], 

                    ]);
                ?>

Answer 1

Finally i resolved my issue. initselection is deprecated in select2 4.0 . i tried to set the initial value using "initValueText"

 echo Select2::widget([
                      'language' => 'en',
                      'initValueText' => ['intialvaluetext'],//text of initial value
                      'name' => 'to',
                       'value' => ['1'],//matching id for initial value text
                      'options' => [
                        'placeholder' => 'Choose...',
                        'id' => "to",
                        'multiple' => true,
                        'data-validation'=>'required',
                      ],
                      'pluginOptions' => [
                                  'language' => [
                                     'errorLoading' => new JsExpression("function () { return 'Waiting for results...'; }"),
                                                ],
                        'allowClear' => true,
                        'minimumInputLength' => 3,
                        'multiple' => true,
                        'ajax' => [
                          'url' => $url,
                          'dataType' => 'json',
                          'tags' => true,
                          'data' => new JsExpression('function(params) { return {search:params.term}; }'),
                          'results' => new JsExpression('function(data,page) {return { results:data.results }; }'),
                        ],

                      ], 

                ]);
            ?>