当我尝试在 rails 6 中使用 select 2 时出错答案

【问题标题】：Error when i try to use select 2 in rails 6当我尝试在 rails 6 中使用 select 2 时出错
【发布时间】：2020-05-27 01:05:25
【问题描述】：

我正在尝试通过 gem select2-rails 在 rails 6 中使用 select2。

我已经添加了 gemfile gem "select2-rails" 并运行 bundle 和 yarn add select2 并导入 .js require("select2") 但是当我尝试使用时出现此错误

$(...).select2 is not a function

我如何解决这个问题？

【问题讨论】：

你在哪里做对了require('select2')。如果你使用 yarn 来管理包，我认为你不需要在任何文件中写 require(select2)

标签： ruby-on-rails jquery-select2 ruby-on-rails-6

【解决方案1】：

您可以按照以下步骤在 Rails 6 中设置 select2：

根据项目自述文件，在 Rails 项目中正确安装 Webpacker。如果您从 Rails 6 应用开始，默认情况下会这样做。
同时添加jquery 和select2：
```
yarn add jquery select2 
```

向 DOM 添加一个选择框

<select class="js-states" name="state">
  <option value="AL">Alabama</option>
   ...
  <option value="WY">Wyoming</option>
</select>

导入jquery、select2和select2 css并在页面加载时应用到选择框：

import $ from 'jquery'
import 'select2'
import 'select2/dist/css/select2.css'

window.addEventListener('DOMContentLoaded', () => {
  $('.js-states').select2()
})

对于开发，在config/webpacker.yml 中设置compile: true。运行webpack-dev-server 是可选的。

您还可以查看此演示：https://github.com/rossta/rails6-webpacker-demo/compare/example/select2

【讨论】：

当我从 environment.js 中删除 jquery 时工作 environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }));跨度>