Rails 下拉列表多选问题

miserytan · July 21, 2017 · Last by zerzerheart replied at July 21, 2017 · 2007 hits

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

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

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

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

多选 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>

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

不过样式可能跟你的截图不同,如果你需要 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

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

Reply to zerzerheart

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

Reply to jasl

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

Reply to miserytan

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

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

在 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)
})

应该差不多是这样

推荐你一个网站 http://www.css88.com/jqapi-1.9/ 可以在这里查找一些 jQuery 的 api 自己试着去写,很简单的

Reply to zerzerheart

谢啦兄弟上次就是你来救火,这次也多谢你哈😄 😄

Reply to miserytan

客气客气😀

Reply to zerzerheart

本来上次的那种形式已经可以通过了,我自己做了一套级联查询挂接 checkbox,结果被否了,然后我突然想到你举得例子感觉可用性很高,

Reply to miserytan

多尝试一些才能学到更多东西嘛😀

miserytan closed this topic. 24 Jul 08:41
You need to Sign in before reply, if you don't have an account, please Sign up first.