Select2 not selecting first item as default <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>