Удалить выбранный вариант в Select2

Question

У меня есть новая проблема с моей опцией Select2. Я не могу очистить поле выбора. Как и в JSFiddle, я выбираю для своих данных. Проблема заключается в том, что я не могу удалить последний элемент или очистить все поле на своем веб-портале, но в JSFiddle все выглядит нормально. Мой портал дает мне ошибку «Type Error: a is null», и я не знаю почему.

Вот мой код:

$.getJSON(url, function (data){ 
    $("#mySelect").select2({ 
     data:data, 
     placeholder: "Select options", 
     templateSelection: function(val) { 
      return val.text; 
     } 
    }); 
}); 

И мой выбор:

<select id="mySelect"></select> 

Проблема исчезает, когда я использую другое решение, но тогда я не могу ссылаться на соответствующие данные для «templateSelection». В этом решении я создаю варианты для моего выбора, и простое использование ВЫБ.2, но, как вы можете видеть на поле «data.version» У меня есть ответ «неопределенную»

Код:

var data=[ 
    {id:1, text: "sample_1", version: "1"}, 
    {id:2, text: "sample_2", version: "2"}]; 

$.each(data, function(i,x){ 
    $('#mySelect').append($('<option>', { 
    value: x.id, 
    text: x.text 
    })); 
}); 

$("#mySelect").select2({ 
    templateResult: function(data) { 
    return data.text + ' ' + data.version; 
    } 
}); 

JSFIDDLE

Любое решение, почему это решение работает в jsfiddle, но не в моем портале?

Answer 1

var data=[{id:1, text: "sample_1", version: "1"},{id:2, text: "sample_2", version: "2"}] 
 

 
$.each(data, function(i,x){ 
 
    $('#mySelect').append($('<option>', { 
 
       value: x.id, 
 
       text: x.text+" "+x.version, 
 
       
 
      })); 
 
}); 
 
$("#mySelect").select2({ 
 
    templateResult: function(data) { 
 
    return data.text; 
 
    } 
 
});

когда функция $ используется для создания элемента может принимать только HTML атрибуты этого элемента