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

Question

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

我已经添加了 gemfile gem "select2-rails"并运行了bundle和yarn add select2和 inport on.js require("select2")但是当我尝试使用时我得到了这个错误

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

我怎么解决这个问题？

Answer 1

以下是在 Rails 6 中设置select2的步骤：

1. 根据项目自述文件，在 Rails 项目中正确安装 Webpacker。 如果您从 Rails 6 应用程序开始，这将默认完成。

2. 添加jquery和select2 ：

    yarn add jquery select2

3. 将 select 框添加到 DOM

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

4. 导入jquery，select2和select2 css并在页面加载时应用到select框：

    import $ from 'jquery' import 'select2' import 'select2/dist/css/select2.css' window.addEventListener('DOMContentLoaded', () => { $('.js-states').select2() })

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

有关更多信息，您还可以查看此演示： https://github.com/rossta/rails6-webpacker-demo/compare/example/select2