title: Select2 not selecting first item as default
body: <p>I am populating a drop down list in an ASP.Net page using this code </p>
  
  <pre><code>var xhttp
  
          xhttp = new XMLHttpRequest();
          xhttp.open("GET", "../XMLHttp/XMLHttp_GetRDRegions.aspx?RDDivision=" + encodeURIComponent(document.getElementById('ddlRDDivisions').value), false);
          xhttp.send();
  
          document.getElementById('ddlRDRegions').options.length = 0;
          document.getElementById('ddlRDCentres').options.length = 0;
          document.getElementById('ddlRMNames').options.length = 0;
  
          var ddlRDRegions = document.getElementById('ddlRDRegions');
          var element = document.createElement('option');
          element.text = '--- Please Select an item ---'
          element.value = '0'
          ddlRDRegions.options.add(element);
  </code></pre>
  
  <p>When not using Select the new element I am adding is the first selected item in the list, however when applying the Select2 in the javascript too like this. </p>
  
  <pre><code>$('select').select2();
  </code></pre>
  
  <p>the element is at the top of the list but is not the selected element. </p>
  
  <p>I have tried creating an attribute like this </p>
  
  <pre><code>var att = document.createAttribute("selected");
  att.value = "selected";
  element.setAttribute(att)
  </code></pre>
  
  <p>which throws an error and this </p>
  
  <pre><code>$(element).attr("selected", "selected")
  </code></pre>
  
  <p>which does nothing. </p>
  
  <p>Any and all help on where I am going wrong would be very much appreciated. </p>