javascript - Select2 不适用于 rails 中的选择元素，我在哪里可以找到丢失的链接？

Question

到目前为止对我有帮助的页面：

• https://github.com/argerim/select2-rails
• Rails 5 ask_as_taggable 与 select2

预期结果：

• 我将 select2 应用于我的选择元素。从那一刻起，我将再次开始自己修理东西。

实际结果：

• Select2 不适用于选择元素。

到目前为止我采取的步骤：

1. 将其添加到 gem，进行捆绑安装。
2. //= require select2像这样添加

：

//= require jquery
//= require jquery_ujs
//= require bootstrap/modal
//= require turbolinks
//= require select2
//= require_tree .

---

3. 将 require select2 和 require select2-bootstrap 添加到 application.css

：

*= require select2
 *= require select2-bootstrap
 *= require_tree .
 *= require_self
 */

4. 在我name.html.erb那里有：

：

<%= f.label :tag_list, "Topics" %>
<%= f.select(:tag_list, Tag.all.order(:name).collect { |a| a.name }, {}, id: "tag_list1", label:'Tags', :multiple => true)%>

我创建了一个Tag.rb（数据保存到数据库）： class Tag < ApplicationRecord validates_presence_of :name end

5. 现在是最后一步（据我了解），我将功能应用于元素（将代码添加到application.js下面//= require_tree .）： $( "#dropdown" ).select2({ theme: "bootstrap" });

将其更改为：

$( "#tag_list1" ).select2({ theme: "bootstrap" });

安慰： Uncaught TypeError: $(...).select2 is not a function

我解决了这个问题：

(function($){
  $(document).on('ready', function(){
      $("#tag_list1").select2({
        theme: "bootstrap",
        tags: true
      });
  });
}(jQuery));

预期结果：

• 我将 select2 应用于我的选择元素。

实际结果：

• Select2 不适用于选择元素。

请指教。

---

更新 1 这是 html 输出：

<input name="item[tag_list][]" type="hidden" value="">
<select id="tag_list1" label="Tags" multiple="multiple" name="item[tag_list][]">
  <option value="12">dev tool</option>
</select>

Answer 1

看着DOM。您应该看到以下加载顺序：jQuery、select2，然后是您的 js 文件。（来源：https ://stackoverflow.com/a/42671121/6430382 ）

而不是ready添加turbolinks:load

制作一个名为/assets/javascripts/select2.js：

//= require select2-full

$(document).on('turbolinks:load', function(){
  $("#tag_list1").select2({
    theme: "bootstrap",
    tags: true,
    placeholder: "Max 5 topics"
  });
});

预期结果：您被select2添加到具有所有功能的元素中。