Rails 下拉列表多选问题

miserytan · 2017年07月21日 · 最后由 zerzerheart 回复于 2017年07月21日 · 2029 次阅读

我想实现一个这种效果，但苦于没有 rails 前台代码编写屡次碰壁，所以请教大神有没有什么好的解决方案

这就是一个简单的下拉列表多选的前台效果

我有一个 Poll 类，想在其 new 的 form 表单中做出，多选 User 表中的 user，Poll 和 User 表多对多关联有个中间表 PollsUsers。

只需要下拉列表的多选能选出并在 input 里能显示就好了，后台获取应该没问题

jasl #1 2017年07月21日

多选 select，有 multiple 控制，比如

<div class="form-group">
  <%= f.label :profile_ids %>
  <%= f.select :profile_ids, Profile.all.collect {|x| [x.name, x.id]}, {}, :multiple => true, class: 'form-control' %>
</div>

zerzerheart #2 2017年07月21日

我记得这是上次我给你写的那个 demo 吧，你想实现什么样的效果呢？描述再清晰一些。是不是需要把选项的 XXX 显示到输入框里？

jasl #3 2017年07月21日

不过样式可能跟你的截图不同，如果你需要 checkbox 的，可以参考我 gem 里的例子 https://github.com/jasl-lab/rbac_core/blob/master/test/dummy/app/views/roles/_permissions.html.erb#L9-L14

当然如果需求简单，Rails 有 helper 一行搞定 http://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_check_boxes

zqalyc #4 2017年07月21日

你可以用select2 多选,gem select2-rails能满足你的需求

miserytan #5 2017年07月21日

对

zerzerheart 回复

是的，其他的比如 checkbox 多选什么的我已经做出来了，还差怎么将 checkbox 内容放在下拉列表中，并能将 checkbox 的 value 放入 input 里

miserytan #6 2017年07月21日

对

jasl 回复

谢谢大神提供的资料，checkbox 方面的我已经做出来成品了，但是目前希望的是可以将 checkbox 和其内容都作为 select 的 option，并且 checkbox 选择上的 value 能在 select 的 input 标签里显示

jasl #7 2017年07月21日

对

miserytan 回复

那就要配合前端 js 了 rails 的视图只管浏览器的初始状态

miserytan #8 2017年07月21日

恩，js 方面可以用 ajax 传值，问题在前端这个 select 框里怎么插入 checkbox

zerzerheart #9 2017年07月21日

在 pull 的 controller 里边把你要查询出来的对象的集合赋给一个实例变量，例如

def new
  @users = User.all
end

然后在 new.html.erb 里

<% @users.each do |user| %>
  <div class="option"><input class="check-option" type="checkbox" value="<%= user.id %>" data-name="<%=user.name%>"><%= user.name %></div>
<% end %>

js 代码改成

$(".check-option").on("change", function(){
   var ids = []
   $(".check-option:checked").each(function(){
      ids.push($(this).data("name"))
    })
   $(".select-form").val(ids)
})