select2 超好用的下拉选单

Rails 自带的下拉选单不好用，效果一般，流行的 select2 就好用多了。

参考链接：

• gem ‘select2-rails’ 单选和多选下来选单
• select2-rails（官方文档）
• select2.org（官方教程）

注意

从 Rails5.1 版本开始，Gemfile 默认不再安装 gem 'jquery-rails' ，无法正常使用 select2，解决方法如下：

在 Gemfile 加入 gem 'jquery-rails'

终端 bundle install

重启 rails s

修改文件 app/assets/javascripts/application.js

- //= require rails-ujs
+ //= require jquery
+ //= require jquery_ujs

select2 简单教程

在 Gemfile 加入 gem 'select2-rails'

终端 bundle install

重启 rails s

文件 app/assets/javascripts/application.js 最下方添加代码

//= require select2

文件 app/assets/stylesheets/application.scss 最下方添加代码

 @import "select2";
 @import "select2-bootstrap";

从 User 表中实现单选与多选（省略 User 表的相关建立）

  <%= form_for @letter_text do |f| %>
    <p>
      <%= f.label "收件人" %>
      <!-- 用户.多选框 -->
      <%= select_tag :rec_id, options_for_select(User.all.collect{|a| [a.name, a.id]}), class: "form-control" ,multiple: "true"%>
    </p>

    <p>
      <%= f.label "发件人" %>
      <!-- 用户.单选框 -->
      <%= select_tag :send_id, options_for_select(User.all.collect{|a| [a.name, a.id]}), class: "form-control"%>
    </p>

    ......#省略无关代码
  <% end %>
</div>

<script>
// 多选框样式
$("#rec_id").select2({
    theme: "bootstrap"
})
</script>