Question

我在Rails中的Jquery select2有问题我有一个模型工作，其中天是一个下拉菜单，我想使用Select2 Jquery输入值。

下面是“天”字段_form.html.erb

  <div class="field">
<%= form.label :days %>
<%= form.select :days, options_for_select($days), options = {:multiple => true}, :id => "dropdown" %>

application.js

//= require jquery
//= require jquery_ujs
//= require select2-full
//= require activestorage
//= require turbolinks
//= require_tree .


  $(document).ready(function(){

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

select2在重新加载页面后可以使用，但是如果通过导航栏中的链接重定向页面，则无法使用。

以下导航栏代码：

<nav>
 <div class="container">
  <ul class="main-menu">
   <li><%= link_to "Home", root_path %></li> 
   <li><%= link_to "new work", new_work_path %></li> 
  </ul>
 </div>
</nav>

application.html.erb：

<!DOCTYPE html>
 <html>
  <head>
   <title>Stack1</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
   <%= render 'layouts/navbar' %>
   <%= yield %>
  </body>
 </html>

这种情况是，用户单击导航栏中的新作品，并显示new_work_path作为输入值，这里的select2不起作用，但是重新加载页面后，select2起作用。

感谢您的帮助。

Answer 1

最后为我的问题找到了解决方案，我认为答案将对研究时面临相同问题的人有所帮助。监听事件$(document).ready(function()而不是监听事件$( document ).on('turbolinks:load', function()，因为Rails使用Turbolinks。所以我们应该将代码修改为：

$( document ).on('turbolinks:load', function() {
    $( "#dropdown" ).select2({
        theme: "bootstrap"
    });

希望这对以后的相同问题有所帮助。

Select2在不重新加载页面的情况下无法正常工作

1 个答案: