Rails 6 select2未定义 如何在js响应中使用select2

问题描述

我在Webpack中使用Rails 6，由于某些原因，当我尝试响应以下js文件时，我无法使用select2：

$("#select-search-bar").select2()

如何在js响应中使用select2

这是我的application.js文件：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('font-awesome/css/font-awesome.css')
require("jquery")
require('cocoon-rails/src/cocoon')
require('chart.js/dist/Chart')
require('materialize-css/dist/js/materialize')
require('../stylesheets/application')
require('packs/dashboards')
require('packs/relateds')
require('packs/banner')
require('packs/users')
import 'packs/select2'
require('packs/resources')

// packs/select2.js
import $ from 'jquery';
import 'select2/dist/js/select2.min'

解决方法

我的猜测是您的app/webpacker/packs/application.js配置不正确。

例如，这就是我所拥有的：

require( 'select2' );
import "select2/dist/css/select2.min.css";

确保已将Select2添加到yarn add select2 see more here。也可以通过添加以下语言环境来翻译Select2：

require( 'select2/dist/js/i18n/en.js' );
require( 'select2/dist/js/i18n/lv.js' );

如果需要引导程序主题，也可以添加它，例如，带有yarn add select2-bootstrap-theme的Bootstrap3，然后在您的app/webpacker/packs/application.js中

import "select2-bootstrap-theme/dist/select2-bootstrap.min.css";

如果这样做没有帮助，则可能是您的控制台出现了一些错误，您可能有兴趣检查一下。