带有 select2 和引导程序的 collection_select：未定义不是函数

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"}

轨道视图

<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>

app/assets/javascripts/application.js

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

呈现的html显示select2 javascript，select显示为：

 <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

只是想知道。将gem 添加到Gemfile 后，您是否运行bundle install？

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