在rails 6中使用select 2时出错。

Question

我想在rails 6中使用select2的gem select2-rails。

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

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

我怎么爱这个？

Answer 1

以下是你可以遵循的步骤来设置 select2 在Rails 6中。

1. 根据项目README，在Rails项目中正确安装Webpacker。如果你开始使用的是 Rails 6 应用程序，这将是默认的。

2. 在项目中同时添加 jquery 和 select2:

   yarn add jquery select2 
   

3. 在DOM中添加一个选择框

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

4. 导入jquery、select2和select2 css，并在页面加载时应用到选择框中。

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

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

更多内容你也可以查看这个演示。https:/github.comrosstarails6-webpacker-democompareexampleselect2。