jquery-select2 相关问题

在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单会重复

_header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> _header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> <div class="form-group" style="display:inline;"> <div class="input-group input-group-md"> <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %> <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %> <%if logged_in? %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %> <% else %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %> <% end %> <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span> </div> </div> <% end %> JS代码 <script> $( document ).on('turbolinks:load', function() { $('select#category').select2({ width: '60%', dropdownAutoWidth : true, placeholder: "Choose a category", maximumSelectionLength: 3 }); $('select#location').select2({ width: '40%', dropdownAutoWidth : true, minimumResultsForSearch: Infinity }); }); </script> 故障或渲染问题（单击链接查看图像） 有人可以帮我解决为什么吗？另外，我的搜索表单位于标题部分文件的导航栏中。 如果我去掉脚本中的 $(...).select ，一切都会正常...我认为 select.js 有问题 在此回复： https://stackoverflow.com/a/41915129/5758027 我在自己的代码中使用了这个解决方案： $(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button. $('.select-select2').select2('destroy'); $('.select-search-select2').select2('destroy'); } ); 和观察者： $(document).ready( ready ); //... once document ready $(document).ajaxComplete( ready ); //... once ajax is complete $(document).on('turbolinks:load', ready ); //... once a link is clicked function ready() { $(".select-search-select2").select2({ theme: "bootstrap", language: 'es', allowClear: true }); $(".select-select2").select2({ theme: "bootstrap", language: 'es', minimumResultsForSearch: Infinity, allowClear: true }); }; 总是清除缓存不是会让使用 Turbolink 变得毫无意义吗？ 不如这样？ $(document).on('turbolinks:before-cache', function(e) { return $('.form-control.select2').each(function() { return $(this).select2('destroy'); }); }); 我无法解决这个渲染问题（仍在等待正确的答案！），但如果有人像我一样遇到类似的问题，请尝试跳出框框思考。这是我的技巧：我在应用程序中添加了一个后退按钮。 获取完整的url路径 # get the previous url def save_previous_page session[:return_to] = request.fullpath end 仅当页面不是主页或搜索页面时才显示后退按钮 <% if session[:return_to] != request.fullpath%> <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <%end%> <% end %> 同时，我仍在等待并尝试解决渲染问题... 解决了问题 只需将此代码添加到您的 .js 文件中 Turbolinks.clearCache(); 这很可能是一些资源不一致，您应该检查您的 app\views\layouts 文件夹中是否有重复声明 wither jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签，以及是否在 layout 文件夹和内部视图中声明相同的脚本。如果情况并非如此，请检查是否有 render、yield 或 build 呼叫 简单的解决方案，不要在您不希望它运行的东西上运行 select2 构建器。 $("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2(); Rails 7 更新 这里的很多东西在 Rails 7 中都不起作用，尤其是 turbolinks:before-cache 事件。您正在寻找的新事件是 turbo:before-cache 和 turbo:load，所以它看起来像这样： $(document).on("turbo:before-cache", function() { $("#select_id").select2('destroy'); }); $(document).on('turbo:load', function() { $('#select_id').select2(); });

select2 不使用数据属性

我正在尝试在 .Net Core 网站中使用 select2 作为我的下拉菜单。我创建了一个下拉菜单： 我正在尝试在 .Net Core 网站中使用 select2 作为我的下拉菜单。我创建了一个下拉菜单： <select id="buildingIds" style="height:1em;" class="form-control" multiple data-ajax--url="@Url.Action("GetLookupTableData", "Buildings")" data-ajax--data-type="json" data-placeholder="Select one or more buildings"><option></option></select> 然后在我的脚本中输入： $('select').each(function () { $(this).select2(); }); 当我运行所有内容时，我的下拉菜单总是响应“未找到结果”，并且占位符永远不会出现。如果我将 javascript 更改为： $('select').each(function () { $(this).select2({ ajax: { url: '/Buildings/GetLookupTableData', dataType: 'json' } }); }); 然后一切都按预期工作，只是占位符仍然没有出现。我不想为我网站中的每个选择都进行硬编码。谁能告诉我为什么它不读取数据属性？ 编辑： 我不知道这是否有什么区别，但我正在使用 webpack 来捆绑我的 javascript。不确定这是否会在 select2 中留下一些重要的东西。 编辑2 根据下面的评论指出 data-* 属性仅替换现有选项，我将我的 javascript 更改为： $('select').each(function () { $(this).select2({ placeholder: "Select some options", ajax: { url: '', dataType: 'json' } }); }); 还是没有喜悦。显示的占位符是来自 javascript 的占位符，而不是来自 data-placeholder 属性的占位符，并且它仍然不会从 data-ajax--url 属性中提取 URL。 尝试代码 $(document).ready(function() { $('select').each(function() { $(this).select2({ ajax: { url: $(this).data('ajax--url'), dataType: $(this).data('ajax--data-type'), delay: 250, processResults: function(data) { return { results: data }; }, cache: true }, placeholder: $(this).data('placeholder') }); }); });

如何在同一页面中同时使用 Django Dynamic Formset 和 Select2？

我已经成功地分别使用了Django Dynamic Formset和Select2。但是，当我使用 select2 并在表单集中动态添加更多表单时，添加的表单不适用于 dropd...

在 select2 中的选项中添加删除按钮

我尝试将删除按钮添加到 select2 中的选项，但是当我单击按钮时它不起作用； 我的代码 我尝试将删除按钮添加到 select2 中的选项，但是当我单击按钮时它不起作用； 我的代码 <select id="mySelect" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <script> $(document).ready(function() { $('#mySelect').select2({ tags: true, tokenSeparators: [',', ' '], templateResult: formatOption }); function formatOption(option) { if (!option.id) { return option.text; } var $option = $( '<span>' + option.text + '<span class="remove-button" onclick="removeItem(\'' + option.id + '\')">Remove</span></span>' ); return $option; } window.removeItem = function(itemId) { $('#mySelect').find('option[value="' + itemId + '"]').remove(); $('#mySelect').trigger('change'); }; }); </script> 它显示删除按钮，但当我单击它时，它只是选择该选项，而不是删除该选项。 您应该添加“e.stopPropagation();” kine 位于“removeItem”函数的开头。当然，作为发送者，您应该将“e”参数添加到函数声明中。

Laravel Livewire 与 Select2：动态输入添加和语言更改时丢失状态

我正在开发一个 Laravel 项目，使用 Livewire 和 Select2 来实现动态表单。我遇到了一个挑战，当我动态添加新的 select inp 时，Select2 失去了其增强功能...

删除我的下拉菜单中的打字功能

1 1 $('#js-

表过滤器不适用于 select2

我正在为我的项目创建表过滤器。对于输入字段，它工作得很好，但我无法正常工作 select2 过滤器，它就是不起作用。这是我的 jQuery 代码： $(文档).准备好(

如何验证select2的字段是否为空

我有一个 Python/Django 项目，我正在尝试添加“select2”以方便用户从银行列表中进行搜索： 类 BuyerNaturalPersonBankAccountForm(forms.ModelForm): select_bank = 主要银行...

Select2 取消选择所有值

我想一键取消选择所有值，而不单独使用每个 id。 我摆弄了一段时间，但这仅取消选择第一个值。有什么建议么？ 这就是我尝试取消选择的方法： $...

是否可以在 Select2 中添加备用可搜索文本？

是否可以在select2中搜索替代文本？，我的select2包含以下内容： [ { “id”：10， “文本”：“伦敦” }, { “id”：11， &

获取select2中的当前元素

我想通过使用一个类来使用多个select2，就像我在自动完成中所做的那样，但我无法在select2中做同样的事情。 这是我的代码： $('.select2-autocomplete').select2({ 占位符：“海...

JQuery Select2 - 如何选择所有选项

我正在使用 jQuery select2 多选下拉列表。我需要从代码中选择下拉列表中的所有选项。 基本上有一个全选复选框，必须在其上实现此功能，我...

使 select2 多选不换行到多行

有没有办法在选择足够的值时使多选不换行？举个例子，它的作用如下： 我想要的是将其全部包含在一行中并且易于访问

Select2 搜索输入在 bootstrap5 上不起作用

我无法单击搜索输入下拉列表。首先，我已经用谷歌搜索过，这是 select2 与 bootstrap3 或 bootstrap4 的常见问题，但是对于 bootstrap 5 来说，它有点不同......

除了 id 和文本值之外，搜索 select2 下拉列表

我有一个用于选择手机国家/地区代码的下拉菜单。 id 值适用于实际的国家/地区代码，例如+1、+61、+86 等，下拉列表的文本值配置为 ${countryCode} (${

在下拉列表中选择 2 个空值

我想在下拉列表中显示没有值的选项，但选择 2 禁止它。 我想在下拉列表中显示没有值的选项，但选择 2 禁止它。 <select name="searchcategory[]" multiple="multiple" class="js-example-basic-multiple"> <option value=''>All Category</option> </select> 我的 select2 js $(".js-example-basic-multiple").select2({ placeholder: "Choose category", }); 在 <option selected> 标签中使用所选内容，如下所示： <select name="searchcategory[]" multiple="multiple" class="js-example-basic-multiple"> <option value='' selected>All Category</option> </select> 希望这有帮助！ 要重置，只需再次调用 select2 $(".js-example-basic-multiple").select2("val", ""); 参考自： 重置 select2 值并显示占位符

如何使用 jquery 选择器通过 {{ $item->id }} 选择 Bootstrap Modal

我注意到当 select2 处于模态时，搜索输入不可聚焦，向上和向下键也不起作用。 jQuery：3.6.1 选择2：4.1.0 我想使用 jquery 选择器来查找...

Select2 从输入字段而不是下拉菜单开始

我使用js库select2。这是我现在拥有的屏幕截图： 开始： 点击下拉菜单： 现在是否可以从一个输入字段开始，而不是直接使用下拉列表？我知道我...

select2 - 设置输入和下拉菜单的不同宽度

我正在使用Select2 3.3.2 我的选择中有非常非常长的选项。 例子： 阿拉巴马州 怀俄明州 我正在使用 Select2 3.3.2 我的选择中有非常非常长的选项。 示例： <select id="e1"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> <option value="WY">very long long long text</option> <option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option> </select> 目的是避免下拉菜单打开时选项被换行。 我想在下拉菜单打开时设置长宽度（例如 - 800px，甚至自动评估宽度）。 但要在下拉菜单关闭时保持输入宽度较短（例如 300px）。 我遵循了 select2 的 “添加设置下拉宽度的选项” 问题。 但是我无法让它工作，选项/下拉菜单的宽度与输入的宽度以及包裹到多行的选项相同。 这是我在 jsfiddle 中的问题的演示 - http://jsfiddle.net/ewwAX/ 提前感谢大家的帮助。 Select2 包含“dropdownAutoWidth”参数，该参数使用 JavaScript 尝试为下拉内容提供足够宽的宽度。 $('#whatever').select2({dropdownAutoWidth : true}); 这至少适用于 Select2 3.4.3 - 我不知道它被引入了多久。 您使用的属性不是用于控制下拉宽度。您可以使用 dropdownCssClass 属性。 这是 jsFiddle 中的演示。 JavaScript： $(document).ready(function() { $("#e1").select2({dropdownCssClass : 'bigdrop'}); }); CSS： .bigdrop { width: 600px !important; } 请注意，对于更新的版本，现在有更好的解决方案！请参阅Dave Amphlett 的回答 $("#e1").select2({ width: '100%' }); 试试这个。 这会将容器的宽度设置为 100% 更好的解决方案。用途： $('#e1').select2({width: 'resolve'}); 试试这个。 $(".js-example-basic-single").select2({dropdownAutoWidth : true}); 试试这个。 <select id="e1" data-width="100%"> 以下是如何使 select2 仅在打开时变宽： 如果你想让它向右侧扩展，请添加这个CSS： .select2-container.select2-dropdown-open { width: 170%; } 如果您希望它向左扩展，请添加此{ .select2-container.select2-dropdown-open { width: 170%; margin-left: -70%; } 我用了这个，效果很完美，只是它会影响所有select2 #select2-drop{ width: 400px !important; } 这对我有用.. .select2-container--krajee .select2-dropdown--below{ width:230px !important; margin-left: -70px !important; } 尝试自定义你的CSS，添加这个 .选择{ width: 100%; } 这对我有用

选择2向上打开下拉-dropup

我想每次都向上显示下拉列表，无论下面有足够的空间。 如何实现？做到这一点的关键点是什么？ 更新 以下是我初始化 Select2 的方法： $("选择[...