title: Select2 ajax is executed 2 times
body: <p>I have a script that get's some data from the backend and populates the select2 dropdown. The problem is that the ajax call is called 2 times always and it should not be like this. I am not sure what I am doing wrong... any help would be apreciated.</p>
  
  <p>this is my code:</p>
  
  <pre><code>var select2Element = $('select').select2({
      theme: "classic",
      escapeMarkup: function (markup) { return markup; },
  });
  
  select2Element.on('select2:opening', function(event) {
      var clicked = $(this);
  
      var route = "{{ path('get_attribute_list', {'articleId': 'ARTICLEID', 'attributeGroupId': 'ATTRIBUTEGROUPID'}) }}"
      var url = route.replace("ARTICLEID", $(this).attr('data-articleId')).replace('ATTRIBUTEGROUPID', $(this).attr("data-attributeGroupId"));
  
      $.ajax ({
          url: url,
          dataType: 'json',
          async: false,
          type: "GET",
      }).then(function (data) {
  
          //@TODO get out elements already inserted
  
          for (var d = 0; d &lt; data.length; d++)
          {
              var item = data[d];
  
              // Create the DOM option that is pre-selected by default
              var option = new Option(item.text, item.id, true, true);
  
              // Append it to the select
              clicked.append(option);
          }
          // Update the selected options that are displayed
          clicked.trigger('change');
      });
  
  });
  
  var inputResult = [];
  select2Element.on('select2:select', function(e) {
      var jsonValue = {
          "articleId": $(this).attr("data-articleId"),
          "attributeGroupId": $(this).attr("data-attributeGroupId"),
          "attributeId": e.params.data.id
      }
      inputResult.push(jsonValue);
  
      $('#addAttributes').val(JSON.stringify(inputResult));
  });
  
  select2Element.on('select2:close', function() {
      $(this).html('');
  });
  </code></pre>