Rails Form_For/Select with Jquery和图像

Rails Form_For/Select with Jquery和图像,jquery,ruby-on-rails,forms,jquery-ui,select,Jquery,Ruby On Rails,Forms,Jquery Ui,Select,一个多星期以来,我一直在努力寻找解决这个问题的最佳方法(是的,我是个新手)。在我的应用程序中,用户创建项目,然后在我的数据库中选择植物对象建立关系(“pfollow”) 到目前为止,我一直在使用一个名为“listselect”的下拉式Jquery选择插件的集合\u select(它工作得很好),但我现在希望能够将植物选择作为图像——而不是在任何类型的下拉菜单中,而是作为网格或在点击后具有特定Jquery UI效果的图像圈中。当前选择的集合如下所示: <%= form_for @pr

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

到目前为止,我一直在使用一个名为“listselect”的下拉式Jquery选择插件的集合\u select(它工作得很好),但我现在希望能够将植物选择作为图像——而不是在任何类型的下拉菜单中,而是作为网格或在点击后具有特定Jquery UI效果的图像圈中。当前选择的集合如下所示:

    <%= 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 %> 

@项目id)do | f |%>
是的,
:class=>“列表选择”%>
我现在不明白的是:在我的页面上展示这些植物图像并将所选植物传递给控制器的最佳方式是什么?我一直在尝试四种不同的方法:

a) 构建一个Jquery UI插件,比如“简单照片管理器”或“可选显示为网格”,然后尝试捕获“UI.selected”的li类。但是如果我这样做,我不知道如何将所选对象的类传递回集合\u select,并且我还没有在线找到一个好的解决方案

b) 使用集合_select中的html选项块创建带有一些添加Jquery的图像选择 但是,同样,我不知道如何将所选图像传递到一个:pfollowed_id中,该id可以由form_for helper传递给控制器

提前谢谢

最后,我的代码实际上是这样的。仍然需要使用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 %> 

@项目id)do | f |%>

您可以使用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\u id]
包含所有pfollower\u id的列表


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

谢谢,@abhishek。该代码需要修改一点以供我使用(我在上面发布了我最终得到的内容)。但复选框的想法看起来很可靠。谢谢。欢迎@Matthew。很高兴能帮上忙。
<%= form_for(prelationship) do |f| %>
  <%  Plant.all.each do |plant| %>
    <%= label_tag plant.name %>
    <%= check_box_tag "prelationship[pfollower_ids]" %>
  <% end %>
<%= end %>