使用Materialize和Rails 4.2时无法添加collection_select

Question

我已经创建了一个分类模型，并使用迁移添加了category_id（基本上是Mackenzie Child在他的视频https://www.youtube.com/watch?v=814gCeOpM4o中从25分钟开始做的一切），我希望它出现在我的表单中。

但是它不起作用，我的collection_select不会显示在屏幕上，但它会在源代码中显示，当我“删除”css框架materialize时。

我的代码：

<div class="container"> 
<div class="row">
    <%= form_for @post do |f| %>
        <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" } %>
        <br>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <br>
        <br>
        <div class="row">
            <div class="input-field col s12">
                <%= f.label :text %>
                <%= f.text_area :text, class: "materialize-textarea" %>
            </div>
        </div>

        <br>
        <br>
        <%= f.label :creator %>
        <%= f.text_field :creator %><br>
        <%= f.submit %>
    <% end %>   
</div>

在源代码中显示的方式：

    <select name="post[category_id]" id="post_category_id"><option value="">Choose a category</option>
        <option value="1">Marketing</option>
        <option value="2">Technology</option>
        <option value="3">Programming</option>
        <option value="4">Health and Fitness</option>
   </select> 

- Ludvig Sørensen

Answer 1

我查看了Materialize文档，发现只需要在我的集合选择器(collection-select)中添加class属性browser-default (文档链接：http://materializecss.com/forms.html)

    <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %> 

- Ludvig Sørensen

---

这个解决方案对我也有用。但是你就无法使用Materialize的选择菜单了。:( - ed_is_my_name

Answer 2

如果您希望选择框以Materialize CSS的方式呈现，而不是浏览器默认方式，则需要删除browser-default类，并在相关的.coffee文件中使用以下代码初始化选择框：

$(document).ready ->
  $('select').material_select
  return

查找位于app/assets/javascripts/下的文件并将其放入其中。

如果你同时使用turbolinks和jQuery，你需要添加jquery.turbolinks gem来使$document.ready函数工作。

在添加jquery.turbolinks后记得重启你的rails服务器。

- Toby 1 Kenobi

Answer 3

基于Toby 1 Kenobi的答案和this one，我使用Rails 5，将$(document).ready更改为$(document).on('turbolinks:load')，如下所示：

$(document).on('turbolinks:load', function() {
  $('select').material_select();
}) 

- IanBussieres