单击时 select2-rails 标签下拉菜单不起作用

Posted

技术标签:

【中文标题】单击时 select2-rails 标签下拉菜单不起作用【英文标题】:select2-rails tags dropdown not working when clicked 【发布时间】:2021-07-08 07:07:38 【问题描述】:

我有以下字段

<%= f.collection_select :tag_list, @tags.order(:name), :id, :name, ,  class: 'select2', multiple: true  %>

我已经添加了select2-rails gem,并在相关文件中添加了 js 和 css

//= require select2-fullapplication.js *= require select2application.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();
);

【问题讨论】:

你也可以在这里添加渲染的 html 代码吗? 虽然有很多@Mshka,但我添加了渲染的 html 不是所有选项 最后一件事,因为它可能是一个初始化问题:你能发布application.js的内容吗 添加了我的 application.js @Mshka 【参考方案1】:

尝试运行

$(function() 
    $('.select2').select2();
);

$(document).ready 已在 jquery3 中删除

我无法重现该问题,我有与您相同的库并导入了 css 资产,除了我有 //= require jquery 而不是 //= require jquery.min 但不应该有问题尝试直接在您的 js 中运行 $('.select2').select2();控制台并查看它是否有效 - 如果是这样,看起来您的 jquery 就绪功能有问题

【讨论】:

在 js 控制台中运行$('.select2').select2(); 时得到Uncaught TypeError: $(...) is null 您能在您的控制台中尝试jQuery$ 并告诉我哪个有效吗? 他们都工作i.gyazo.com/f26daeb844ce42010505db48c9803b6c.png 尝试在您的表单所在的页面上运行jQuery('.select2').select2(); 啊完美i.gyazo.com/349b864d19699c48e0025f2fc796e537.png,我不怎么处理jQuery,因为它显示了哈哈,谢谢。

以上是关于单击时 select2-rails 标签下拉菜单不起作用的主要内容,如果未能解决你的问题,请参考以下文章

选择值后如何将下拉菜单转换为标签。单击按钮后再次转换为下拉菜单

单击时菜单不切换(关闭)

引导下拉菜单在单击时关闭

在选择框上至少有一个字符之前不要显示下拉菜单

单击按钮时引导下拉菜单未打开

仅使用 CSS 在悬停时显示下拉菜单并在单击时关闭