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

1

2

3

select2 简单教程

在 Gemfile 加入 gem 'select2-rails'

终端 bundle install

重启 rails s

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

//= require select2

1

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

@import "select2";

@import "select2-bootstrap";

1

2

从 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>

————————————————

版权声明：本文为CSDN博主「赵龙1043」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_41676219/article/details/79348864