rails中的select元素没有应用select2，哪里找缺失的link？

Question

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

https://github.com/argerim/select2-rails

预期结果：

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

实际结果：

Select2 未应用于 select 元素。

到目前为止我已完成的步数：

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

:

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

将要求 select2 和要求 select2-bootstrap 添加到 application.css

:

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

在我的 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

现在是最后一步（据我了解），我将功能应用于元素（将代码添加到 //= require_tree . 下面的 application.js）： $( "#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 应用于我的 select 元素。

实际结果：

Select2 未应用于 select 元素。

请指教

更新 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 文件。（来源：）

而不是 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 添加到您的元素并具有所有功能。

rails中的select元素没有应用select2，哪里找缺失的link？

Select2 is not applied to select element in rails, where do I find the missing link?

javascript

jquery

ruby-on-rails

turbolinks

select2-rails