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

Question

在 SO 上有几篇与此类似的帖子，但我还没有找到一个答案检查正确的帖子。我正在尝试按照 GitHub page 中的说明在我的 Rails 3.2 应用程序中实现 select2-rails gem。 .我捆绑了 gem 并包含了 javascript 和 css 文件。然后我添加了一个 js 函数调用，就像 sample code 中的那样。 .但是，我的选择栏根本没有改变。

Javascript 包括:

# 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 包括:

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

我的表单页面，只是试图复制示例:

# new.html.haml

=content_for :title, 'Post a 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

我的脚本结尾和 HAML 生成的 HTML:

$(document).ready(function() { $("#e1").select2(); });
</script>
      <select id='e1'>
        <option value='AL'>Alabama</option>
        <option value='WY'>Wyoming</option>
      </select>

所有这些只会产生一个正常的选择下拉菜单，没有 select2 样式/功能。

在 Javascript 控制台中，我看到函数调用出现以下错误:

Uncaught TypeError: undefined is not a function 

我对 Javascript 不是很熟悉，但我猜这意味着函数 `select2()' 有问题。但是，我不确定如何开始调试它，因为我已经逐字逐句地遵循了 gem 安装说明。当我查看页面源代码时，我看到正在加载的 select2 js 库如下:

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

Answer 1

错误可能与你两次加载 jQuery 有关:

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

您正在做的是加载 jquery，然后加载 select2。然后加载第二个 jQuery，它消除了第一个 jQuery(具有与之关联的 select2)。所以当你打电话时:

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

select2 在第二个 jQuery 上不再存在。

我无法想象你真的需要加载两个 jQuery，所以去掉一个。