ruby-on-rails - collection_select 与 select2 和 bootstrap : undefined is not a function

Question

在 Rails 4.1 应用程序中，我有一个从哈希加载的集合选择。我想使用 select2 boostrap 样式，但它似乎不起作用。

我已经包括了 select2-rails gem，并更新 application.js 和 application.css 按照说明。

gem 'select2-rails'

//= require select2

*= require select2
*= require select2-bootstrap

collection_select 从模型上的常量加载。我不认为这与该问题特别相关，但在此处添加它以防它对某人有所帮助。

FLASHCARD_TYPE = {"verb" => "Verb Conjugation",
                "name" => "Word",
                "number" => "Number",
                "quiz" => "Quiz"}

rails View

<div class="form-group">
  <%= f.label :card_type, :class => "col-sm-2 control-label" %>
  <div class="col-sm-2">
    <%= f.collection_select(:card_type, Flashcard::FLASHCARD_TYPE, :first, :last) %>
  </div>
</div>

应用程序/ Assets /javascripts/application.js

$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

呈现的 html 显示了 select2 javascript，并且选择显示为:

 <div class="form-group">
    <label class="col-sm-2 control-label" for="flashcard_card_type">Card type</label>
    <div class="col-sm-2">
      <select id="flashcard_card_type" name="flashcard[card_type]">
         <option value="verb">Verb Conjugation</option>
         <option value="name">Word</option>
         <option value="number">Number</option>
         <option value="quiz">Quiz</option></select>
    </div>
  </div>

这怎么能正常工作？
事实上，我还希望通过类为所有选择设置一个站点范围的默认值，然后能够通过单个 id 覆盖样式。

我认为这对所有选择都适用于整个站点，但它也没有任何作用。

$(document).ready(function(){
  $("select").select2();
});

编辑

按照@San 的建议，我检查了 Javascript 控制台，并得到了

Uncaught TypeError: undefined is not a function 

这是它失败的代码

$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

编辑 2
完整的 application.js 文件

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-markdown
//= require select2
//= require_tree .

$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

编辑 3
jQuery 正在查找元素 OK

$(document).ready(function(){
    debugger;
    console.log($("#flashcard_card_type"))
  $("#flashcard_card_type").select2();
});

日志

 [select#flashcard_card_type, context: document, selector: "#flashcard_card_type",  jquery: "1.11.1", constructor: function, toArray: function…]
 0: select#flashcard_card_type
 context: document
 length: 1
 selector: "#flashcard_card_type"
 __proto__: Object[0]

编辑 - 我试过的

移除涡轮连杆

将 javascript 添加到页面

删除缓存，重新启动 rails

我发现了什么

jQuery 可以找到标签

select2 库通过 js 调试器中的网络选项卡加载

有任何想法吗？

Answer 1

就是想。你跑了吗bundle install添加 gem 后到 Gemfile ?

如果你这样做了，最后要检查的是确保 select2 JavaScript 文件在您的块之前加载以使用它。通过在页面上查看源代码来验证这一点，并确保 select2.js之前列出application.js文件(假设您处于开发模式)。