javascript - select2-rails gem: installed assets and called function but dropdown not changing (TypeError: undefined is not a function) -

there several posts similar on have yet find 1 has answer checked correct. trying implement select2-rails gem in rails 3.2 app following instructions @ github page. bundled gem , included javascript , css files. added js function call 1 in sample code. select bar, however, isn't changing @ all.

javascript include:

# application.js //= require jquery //= require jquery_ujs //= require select2 //= require jquery-1.11.0.min.js //= require lightbox.min.js //= require parsley //= require ./jquery.datetimepicker.js //= require stripe/jquery.payment.js //= require_tree . 

css includes:

# application.css.less /*  *= require_tree .  *= require select2  *= require select2-bootstrap  *= stub active_admin */ 

my page form, trying replicate example:

# new.html.haml  =content_for :title, 'post job' = javascript_include_tag "https://js.balancedpayments.com/1.1/balanced.js" :javascript   var _balanced_marketplace = "#{@balanced_marketplace}";   var _categories = #{raw(@categories.to_json)};   $(document).ready(function() { $("#e1").select2(); }); ... ... %select{id: "e1"}   %option{value: "al"} alabama   %option{value: "wy"} wyoming 

the end of script , html generated haml:

$(document).ready(function() { $("#e1").select2(); }); </script>       <select id='e1'>         <option value='al'>alabama</option>         <option value='wy'>wyoming</option>       </select> 

all of results in normal select drop-down no select2 styling/features.

in javascript console seeing following error function call:

uncaught typeerror: undefined not function  

i not extremely familiar javascript i'm guessing means there problem function `select2()'. however, not sure how begin debugging since i've followed gem installation instructions word-for-word. when view page source see select2 js library being loaded follows:

<script src="/assets/select2.js?body=1" type="text/javascript"></script> 

the error has loading jquery twice:

//= require jquery //= require jquery_ujs //= require select2 //= require jquery-1.11.0.min.js 

what you're doing loading jquery, loading select2. load second jquery wipes out first jquery (that had select2 associated it). when call:

$("#e1").select2(); 

select2 no longer exists on second jquery.

i can't imagine need 2 jqueries loaded, rid of one.