Question

我有一个Rails 4应用程序，我尝试使用Select2-rails gem，因此我可以搜索下拉列表（它们很长）。

我有下拉渲染，但它没有任何Select2功能或样式。

我已经关注了installation instructions并看到其他人有problems with rendering。我尝试在application.js和application.css中重新排列顺序，但似乎没有任何效果。

这是我的页面代码：

<%= form_for(@query) do |f| %>
  <% if @query.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@query.errors.count, "error") %> prohibited this query from being saved:</h2>

      <ul>
      <% @query.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :query_name %><br>
    <%= f.text_field :query_name %>
  </div>

  <%= f.fields_for :questions do |builder| %>
    <fieldset>
      <%= builder.label :group_name, "Group Name" %></br>
      <%= builder.text_field :group_name %>
    </fieldset>
  <% end %>

<!-- trying select2 -->
  <form>
  </br>
    <p>select2 version</p>
    <%= select_tag "demographics", options_from_collection_for_select(@demographic, "id", "demographic_name"), id: "simple-example", id: "placeholder-example", data: { placeholder: "Choose a demographic" } %>
    </br>
  </form>
  <!-- end of select2 -->

  <div class="field">
    <%= f.label :operator %><br>
    <%= f.collection_select :operator_id, Operator.order(:name), :id, :name, include_blank: :true %>
  </div>
  <div class="field">
    <%= f.label :response %><br>
    <%= f.grouped_collection_select :response_id, Demographic.order(:demographic_name), :responses, :demographic_name, :id, :name, include_blank: :true %>
  </div>
  <div class="field">
    <%= f.label :operator_selection %><br>
    <%= f.collection_select :operator_selection_id, OperatorSelection.order(:name), :id, :name, include_blank: :true %>
  </div>

</br>

  <div class="actions">
    <%= f.submit %>
  </div>

<% end %>

<% content_for :js do %>
<script type="text/javascript">
$(document).ready(function() {
  $('select#simple-example').select2();

$('select#placeholder-example').select2({
      placeholder: "Choose a person",
      allowClear: true

$( "#dropdown" ).select2({
    theme: "bootstrap"
});
</script>
<% end %>

这是我的application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require select2
//= require_tree .

这是我的application.css

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

看起来像一个很棒的工具。如果我能让它发挥作用。非常感谢所有帮助。

更新：我能够通过将所有Javascript放在页面中来实现这一点。出于某种原因，它不会在其他任何地方使用它。

select2-rails无法正确渲染

0 个答案: