rails使用html form,Rails 页面多选下拉框, form_for, form_tag 使用技巧及 select2 使用

表单的多选下拉框在 web 项目中比较常用且常见，所以快速构建多选下拉框是每个 Rails 全栈开发者必备的技能。

这篇文章总结使用 select2 前端插件和 Rails 内置的视图帮助方法 select 或者 select_tag 渲染 select html 标签和 form_for 构建表单一个小技巧。

引入select2

下载 select 最新版的 js 和 css 文件并对应添加到 app/assets/javascript 和 app/assets/stylesheet 目录下， 然后分别在 rails 项目的 application.js 和 application.css 中引入。

最后在指定的 select 标签中绑定即可

$('.specify_class').select2({

tags: true,

tokenSeparators: [',', ' ']

});

Rails select, select_tag 和 form_for, form_tag 的用法

select 的用法

文档给出的例子如下:

select(method, choices = nil, options = {}, html_options = {}, &block)

看看具体场景的使用例子。编辑文章页面，有文章对应的 tag ,可新增、删除或者选择已有的系统中已有的标签。

= form_for( @post, html: { class: "form" }) do |f|

......

= f.select :tag_list, @tags.collect { |t| [t.name,t.name] }, {}, { :multiple => "multiple" }

......

在 Rails 项目中，新建、编辑的表单一般抽出来放在单独的一个文件中。例如在这里新建、编辑文章我们需要操作的都是文章标题，内容以及标签，所以可表单可放在一个 _form.html.haml文件中，以此 new.html.haml和edit.html.haml render 其即可。

form_for 的使用技巧

那么这里引出了一个题外话，我建议使用@post 构建 form_for 而不是 :post ，理由是什么呢？因为这样就减少了写 form_for 的 url 和 method 参数，如果 @post 对象是数据库存在的一个记录，则 form_for 的 url 隐式为 post_path(@post)，method 为 put ，这样表单提交之后就能被 update 处理。反之如果 @post 对象不是已经存在的记录，则 form_for 的 url 为 post_path，method 为 post ，所以表单提交后会被 create 处理。

另外，表单中的 @post 和 @tags 对象建议在 _form.html.haml 文件中构建而不是在 new 或者 edit action 中构建传到页面，理由是当表单提交保存失败之后，update 或者 create action render 重新渲染页面对应页面不会因为没有请求对应的 new 或者 edit action 而导致这两个对象不存在。关于 render 的使用方法具体可以看 Rails render 和 redirect_to 进阶理解

form_tag 注意事项

首先看 API 的结构form_tag(url_for_options = {}, options = {}, &block) options 有 multipart, method, authenticity_token, remote以及 html 属性。

通过new_record?方法判断 @post 对象是否为数据库中存在的记录，form_for 直接使用 @post 对象之后能自动构建表单的 url 和 method ，但是在 form_tag 中，method 默认的 method 为 :post，即使 @post 对象为数据库中存在的记录，但是 method 还是 :post，如果是 update 操作，我们需要表单的 method 值为 :put,此时就要显式地在 form_tag 方法中使用 method 参数，值为 :put，例如:

- method_form = @member.new_record? ? :post : :put

= form_tag(url,method: "#{method_form}"

还有一点需要注意的是，如果通过浏览器审查元素，发现 form 元素的method 还是 post, 类似下面的这种情况:

这是为什么呢，翻阅 form_tag API 发现对 method 参数有一段描述

:method

The method to use when submitting the form, usually either “get” or “post”. If “patch”, “put”, “delete”, or another verb is used, a hidden input with name _method

is added to simulate the verb over post.

然后不得而知 method 显式声明为 非 post 时，渲染页面时，表单会有一个隐藏 input

所以上文提到 form_for 使用小技巧就不再适用了，在 非 post 请求时，即使 @post 对象为数据库中存在的记录，我们还是需要显式地指定 form_tag 的 method 参数。

select 的选项

当 @post 是一个存在记录的对象，我们可以通过 @post.tag_list拿到与该篇文章所有关联的 tags 对象数组。所以在编辑页面，f.select :tag_list能渲染出已经关联的 tag 对象，我编辑的某篇文章有 test, list, javascript 标签，所以当编辑页面渲染时，下拉框渲染如下:

select list

这部分只要看 choices = nil 和 html_options = {}，前者是下拉框的选项，只要是 hash 即可，在这里通过 collect 方法构建了 hash k/v ；后者是 html 标签的属性，由于是多选框，所以我们添加了 multiple 属性。

select_tag 的用法

如果表单是通过 form_tag 构建的表单，那么 Rails 的 select 视图帮助方法就显得不行了，但是我们可以使用 select_tag

select_tag(name, option_tags = nil, options = {})

第二个参数是下拉框选项，第三个可选参数有如下：

multiple : 如果值为 true，则为多选框(这里我们需要的改可选参数)

disabled : 如果值为 true， 则改下拉框不可用状态

include_blank : 如果值为 true ，则建立一个空的可选项，如果值为其他字符串，则新建的可选项的内容为该字符串，但为空值

prompt : 其作用是提示，譬如：如果其值为 "选择用户"。

其他 html 属性

看一个例子(一个用户可以被指派到过个组织)：

= select_tag :group, options_from_collection_for_select(@groups,"id","name", @selected_group), :multiple => true, class:'group_select'

上面代码中 :tag_list 并不像上部分 select 必须如此写，因为 f.select通过 :tag_list获取与 @post 对象关联的 tag ,但是在 select_tag中，关联的 tag 对象只能在可选项中标明那个 tag 已经和 @post 对象关联了。那么如何在可选项中标明那些 tag 已经被选了呢。来看看 Rails 构建 select option 的视图帮助方法:

options_from_collection_for_select(collection, value_method, text_method, selected = nil)

结合例子中看看

options_from_collection_for_select(@groups,"id","name", @selected_group)

那么 edit action 渲染完成时，@selected_group对象被渲染出来。

这里需要注意的是 value_method 和 selected 两个参数应一致。在这里 value_method 是组织记录的 id ，所以 selected 应是组织 id 构成的 ids 数组。我们继续贴一下 @selected_group 对象是怎么拿到的 @user.groups.pluck(:id)，由于 user 和 group 是一对多关系，通过 pluck拿到了该用户所属组织的 ids 。

总结

写到这里差不多结束了，总结一下：

select2 前端插件的简单使用，一些高级用法可翻官方文档详细看看

Rails 视图帮助方法 select 和 select_tag 使用方法。

Rails form_for, form_tag 帮助方法使用，建议使用 Resource-oriented style构建表单,即就是使用 model 对象的方式。

详情可翻看官方文档的解释。Resource-oriented style 部分。