Rails Form_For/Select 与 Jquery 和图像

Question

一个多星期以来，我一直在努力寻找解决此问题的最佳方法（是的，我是新手）。在我的应用程序中，用户创建项目，然后与他们在我的数据库中选择的植物对象建立关系（“pfollow”）。

到目前为止，我一直在使用一个带有名为“listselect”的下拉 Jquery 选择插件的 collection_select（它工作正常），但我现在希望能够将植物选择作为图像来显示——而不是在任何类型的下拉菜单，而是作为网格或在单击时具有某些 Jquery-UI 效果的图像圆圈。 collection_select 当前如下所示：

    <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>
      <%= collection_select :prelationship, :pfollower_id, Plant.all, :id,   
                            :group, {},:multiple => true,
                            :class => "listselect" %>
      <%= hidden_field_tag :project_id, @project.id %>
    <div class="actions">
      <%= f.submit "Pfollow" %>
    </div>
   <% end %> 

我现在想不通的是：在我的页面上展示这些植物图像并将所选植物传递给控制器​​的最佳方式是什么？我一直在玩弄四种不同的方法：

a) 构建一个 Jquery-UI 插件，如“简单照片管理器”或“可选择显示为网格”，然后尝试捕获“ui.selected”的 li 类。但是如果我这样做的话，我不知道如何将所选对象的类传回collection_select中，我也没有在网上找到好的解决方案。

b) 使用 collection_select 中的 html 选项块创建一个带有一些添加的 Jquery 的图像选择

c) 在选择页面上将每个植物图像作为一个唯一对象，而不使用 collection_select，并使每个植物图像具有自己的“form_for image_tag”，在单击 Ajax 时立即创建适当的关系

d) 与 (c) 类似，使每个植物图像成为自己唯一的对象，然后在单击时捕获 ui.selected 并将其传递给 form_for 帮助器，如下所示：

    <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %> 

但是，我还是不知道如何将选定的图像传递到 form_for 助手可以用来传递给控制器​​的 :pfollowed_id 中。

提前致谢！

最后，我的代码实际上是这样的。还是得玩 CSS 和 Jquery：

   <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>
     <%  Plant.all.each do |plant| %>
       <%= label_tag "prelationship[pfollower_id][]", plant.name %>
       <%= check_box_tag "prelationship[pfollower_id][]", plant.id %>
     <% end %>  
   <%= hidden_field_tag :project_id, @project.id %>
   <%= f.submit "Pfollow" %>
   <% end %> 

Answer 1

您可能会使用 Jquery 等实现很多 UI 魔术，但我会建议一种简单的方法来用复选框替换下拉菜单 -

<%= form_for(prelationship) do |f| %>
  <%  Plant.all.each do |plant| %>
    <%= label_tag plant.name %>
    <%= check_box_tag "prelationship[pfollower_ids]" %>
  <% end %>
<%= end %>

这段代码为每个植物创建了一个复选框和一个对应的标签，当表单发布时，params[:prelationship][:pfollower_ids] 包含所有 pfollower_ids 的列表

为了进一步增强 UI，您可以将标签替换为 image_tag，并添加一些 Js 以在每次单击图像标签时选中/取消选中相应的复选框。然后，也许如果你想删除复选框，你可以用 css 隐藏它们，或者使用hidden_field_tag 将它们完全删除。