As we have seen in the past AMD (Asynchronous Module Definition) in Dojo causes issues with jQuery plugins and other JavaScript libraries, in that it prevents them from loading correctly.

The select2 version4 – new release contains AMD checking code

https://github.com/select2/select2/blob/master/dist/js/select2.js

As you can see from the start

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}

So we have two choices – edit the select2.js code which you download and add it to your database – change the code to look like this

(function (factory) {
  if (typeof define === 'function' && false) { // removed define.amd and returned false
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}

Or we have to ensure the database properties are set to do resource aggregation and use the following code to insert jQuery and select2 into the header

<xp:this.resources>

  <xp:headTag tagName="script">
   <xp:this.attributes>
    <xp:parameter name="type" value="text/javascript" />
    <xp:parameter name="src" value="js/jquery-1.9.1.min.js" />
   </xp:this.attributes>
  </xp:headTag>

  <xp:headTag tagName="script">
   <xp:this.attributes>
    <xp:parameter name="type" value="text/javascript" />
    <xp:parameter name="src" value="select2.js" />
   </xp:this.attributes>
  </xp:headTag>
 </xp:this.resources>

Check out Sven’s other blog post on the subject – http://hasselba.ch/blog/?p=1181