select2-rails 标记下拉菜单在单击时不起作用
select2-rails tags dropdown not working when clicked
我有以下字段
<%= f.collection_select :tag_list, @tags.order(:name), :id, :name, {}, { class: 'select2', multiple: true } %>
我添加了 select2-rails
gem 并在相关文件中添加了 js 和 css
//= require select2-full
application.js
*= require select2
application.css
我还在我的 application.js 文件中添加了以下内容
$(document).ready(function() {
$('.select2').select2();
});
但是,我得到以下信息
甚至不会下拉。
渲染HTML
<select class="select2 hasCustomSelect" multiple="multiple" name="contact[tag_list][]" id="contact_tag_list" style="appearance: menulist-button; position: absolute; opacity: 0; height: 33px; font-size: 13px; width: 1563px;">
<option value="28">ANFIM</option>
<option value="11">BWT filter</option>
...
</select>
在 application.js 中添加 select2 js 时,我也得到了这个
app.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery.min
//= require jquery_ujs
//= require prototype
//= require moment.min
//= require fullcalendar
//= require lib_ext
//= require BigDecimal-all-1.0.1.min
//= require dialog
//= require widgets
//= require classes
//= require payroll
//= require account_context_menu
//= require plan_table
//= require requirements
//= require help
//= require help_data
//= require jquery.contextMenu.js
//= require jquery.treetable
//= require jquery.jstree
//= require select2-full
//= require plugins
//= require scripts
//= require additional
//= require effects
//= require clusterize.min
//= require consolidated_orders
//= require sales_invoices
//= require main
//= require journals/auto_reversal
//= require budgets/new
//= require budgets/export
$(document).ready(function() {
$('.select2').select2();
});
尝试运行
$(function() {
$('.select2').select2();
});
$(document).ready
已在 jquery3
中删除
我无法重现这个问题,我有和你一样的库并且也导入了 css 资产,除了我有 //= require jquery
而不是 //= require jquery.min
但不应该是问题 直接在您的 js 控制台中尝试 运行 $('.select2').select2();
,看看它是否有效 - 如果是这样,您的 jquery 就绪函数
似乎有问题
我有以下字段
<%= f.collection_select :tag_list, @tags.order(:name), :id, :name, {}, { class: 'select2', multiple: true } %>
我添加了 select2-rails
gem 并在相关文件中添加了 js 和 css
//= require select2-full
application.js
*= require select2
application.css
我还在我的 application.js 文件中添加了以下内容
$(document).ready(function() {
$('.select2').select2();
});
但是,我得到以下信息
渲染HTML
<select class="select2 hasCustomSelect" multiple="multiple" name="contact[tag_list][]" id="contact_tag_list" style="appearance: menulist-button; position: absolute; opacity: 0; height: 33px; font-size: 13px; width: 1563px;">
<option value="28">ANFIM</option>
<option value="11">BWT filter</option>
...
</select>
在 application.js 中添加 select2 js 时,我也得到了这个
app.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery.min
//= require jquery_ujs
//= require prototype
//= require moment.min
//= require fullcalendar
//= require lib_ext
//= require BigDecimal-all-1.0.1.min
//= require dialog
//= require widgets
//= require classes
//= require payroll
//= require account_context_menu
//= require plan_table
//= require requirements
//= require help
//= require help_data
//= require jquery.contextMenu.js
//= require jquery.treetable
//= require jquery.jstree
//= require select2-full
//= require plugins
//= require scripts
//= require additional
//= require effects
//= require clusterize.min
//= require consolidated_orders
//= require sales_invoices
//= require main
//= require journals/auto_reversal
//= require budgets/new
//= require budgets/export
$(document).ready(function() {
$('.select2').select2();
});
尝试运行
$(function() {
$('.select2').select2();
});
$(document).ready
已在 jquery3
我无法重现这个问题,我有和你一样的库并且也导入了 css 资产,除了我有 //= require jquery
而不是 //= require jquery.min
但不应该是问题 直接在您的 js 控制台中尝试 运行 $('.select2').select2();
,看看它是否有效 - 如果是这样,您的 jquery 就绪函数