Select2是基于jQuery的选择框的替代品。它支持搜索，远程数据集和无限滚动结果。
我需要重写特定ForeignKey的Select2小部件在Django（4.1）管理中的行为方式。 也就是说，我正在尝试增加 AJAX 请求返回的对象数量，并且
如何选择jquery无序下拉列表selenium webdriver
我可以编写java代码来选择下拉列表，如果它有正常的选择类，例如：- new Select(driver.findElement(By.id("someid"))).selectByValue("1")); 但下面...
我有一个 Select2，它是 Django 的自动完成小部件。由于 Firefox 在模式内部时不关注 Select2 的一个已知问题，我使用此行添加 dropdownParent： $("#id_pro...
我已经初始化了一个select2 用通过 AJAX 请求生成的列表填充它。 它有一个
我有一个ajax select2（v 3.5.4）完美工作，但现在我需要它与条形码扫描仪一起使用。 我需要检测何时按下回车键。扫描仪将代码插入 select2 输入中...
我想在我的html文档中使用select2库，因为它有一个我想使用的药盒样式选择控件。 我按照...
我有一个标准的 select2 设置 输入城市 我有一个标准的 select2 设置 <div class="form-group"> <label for="cities">Enter Cities</label> <div> <select class="form-control cities-tags" multiple="multiple"></select> <button type="button" id="import-cities" data-bs-toggle="modal" data-bs-target="#importModal"> <svg>...</svg> </button> </div> </div> 应用选择2 $(".cities-tags").select2({ tags: true, }) 我还有一个模型，可以将逗号分隔的值粘贴为文本，它会将它们分割成单独的标签并输入它们。 // #importCitiesBtn is a button in the model to confirm pasting $('#importCitiesBtn').on('click', function() { var importedCities = $('#importCitiesInput').val().split(','); importedCities.forEach(function(cityName) { if (cityName.trim() == '') { return; } let option = $('.cities-tags').find("option:contains('" + cityName.trim() + "')"); if (option.length === 0) { var newOption = new Option(cityName.trim(), cityName.trim(), true, true); $('.cities-tags').append(newOption).trigger('change'); } else { $('.cities-tags').val(cityName.trim()).trigger('change'); } }); }); js 插入工作正常，问题是： 当我手动插入城市并删除它们时（单击x），它们被完全删除（好） 当我删除 js 插入的项目时，它会从所选项目中删除，但选项仍然存在（不好） 预期行为：当我删除手动或通过 js 添加的项目时，它没有任何痕迹或其选项也从列表中删除。 添加逻辑源 注意：如果您可以编写逻辑将逗号分隔的字符串直接粘贴到选择中并自动解析和附加，则额外加分。 手动创建一个新选项，然后删除它，删除其选择及其选项 给定 <select multiple> 和 $(..).select({ tags: true })，select2 允许您键入 新条目。从所选标签中删除这些条目也会将它们从 <select> 选项中删除。 当 select2 执行此操作时，它会添加一个附加属性：data-select2-tag='true' - 这就是当您取消选择标签时它知道删除 option 的方式。 因此，通过代码添加时，您只需添加相同的属性即可，它将被自动删除 - 它必须是一个属性，使用 $(..).data( 是不够的。 当您使用 jQuery 并且不更改其余代码时，这将变为： var newOption = new Option(text, value, true, true); $(newOption).attr("data-select2-tag", "true"); 添加新选项，然后在取消选择标签时（自动）删除它们的示例： $('.states').select2({ tags: true }); $("#add").click(() => { let opt = $(".states option").length; var newOption = new Option("opt " + opt, opt, true, true); $(newOption).attr("data-select2-tag", "true"); $('.states').append(newOption).trigger('change'); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <select class="states" multiple> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <br/> <button id="add"> click to add new entry with code </button> 将逗号分隔的字符串直接粘贴到选择中并自动解析和追加的逻辑 您可以监听 select2:selecting 事件（注意：不同版本的 select2 使用不同的事件），然后检查 e.params.args.data.text - 如果有逗号，则拆分并添加多个新选项。 如果选项已存在，则需要更新该值以包含现有选项（而不是完全替换该值，这是 select2 站点提供的值（根据问题中的代码）） 更新的代码片段：注意：这不是 100% 工作 包含在这里作为起点。当输入包含现有选项的逗号分隔值时，使用 data-select2-tag 添加项目时，它似乎会丢失。 // Add an exact-equals (can also make this case insensitive) // https://stackoverflow.com/a/16158932/2181514 $.expr[":"].equals = function(obj, index, meta, stack) { return (obj.textContent || obj.innerText || $(obj).text() || "") == meta[3]; }; $('.states').select2({ tags: true }); $("#countBtn").click(() => { console.log($(".states option").length) }); $("#addBtn").click(() => { let opt = $(".states option").length; // this would normally need a check for duplicate, left out here for simplicity var newOption = new Option("opt " + opt, opt, true, true); $(newOption).data("select2-tag", "true"); $('.states').append(newOption).trigger('change'); }); $(".states").on("select2:selecting", function(e) { if (e.params.args.data.element) return; let ddl = $(this); let entry = e.params.args.data; var opts = entry.text.split(","); // only process if more than one, if just one new entry, allow select2 to do its own thing if (opts.length > 1) { for (var opt of opts) { // Check for existing let option = ddl.find("option:equals('" + opt.trim() + "')"); if (option.length === 0) { // This specific opt is new let newOption = new Option(opt.trim(), opt.trim(), true, true); $(newOption).data("select2-tag", "true"); ddl.append(newOption).trigger('change'); } else { // This opt already exists so update the array of selected values // NB: This then *removes* the select2-tag let val = ddl.val(); val.push(opt.trim()); ddl.val(val).trigger('change'); } // set the return to the current loop, so returns the last entry to select2 // otherwise it tries to add the original comma-separated list e.params.args.data.text = opt.trim(); e.params.args.data.id = opt.trim(); } } }); <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <select class="states" multiple> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <!-- options that are quicker to type, for testing --> <option value="X">X</option> <option value="Y">Y</option> </select> <button id="countBtn"> click after typing new entry </button> <button id="addBtn"> click to add new entry with code </button>
我不知道问题出在哪里 这是 select2 的返回： 这是我的代码 HTML： 我不知道问题出在哪里 这是select2的返回： 这是我的代码 HTML： <div class="row"> <div class="col-sm-12 form-group"> <label class="form-label-bold">Jenis</label> <select class="select2 form-control" id="type" required> <option value="">Pilih</option> <option value="1">Head Office</option> <option value="2">Branch Office</option> </select> </div> </div> 和我的 jQuery： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.select2').select2({}) }) </script> 这是 cdn CSS： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 您必须在选择标签中给出“多个”才能获得多个选择。 <select class="select2 form-control" id="type" multiple required> <option value="">Pilih</option> <option value="1">Head Office</option> <option value="2">Branch Office</option> </select> 您还需要包含 select2 的脚本标签
我有一个带有选择元素的 HTML 表单。不过我正在使用 select2 库。我想监听表单输入的变化。我添加了一个更改事件侦听器。然而，即使我改变了这个选项
要获取我正在使用的 select2 的选定值： var x = $("#select").select2('data'); var select_choice = x.text 问题是，如果没有选择值，这会引发错误，我很奇怪......
问题是如何在选项的一部分上应用样式。 我有一个像这样的选择： 项目 1 问题是如何在选项的一部分上应用样式。 我有一个像这样的选择： <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 浏览器不允许在 OPTION 中使用标签并删除它们。 因此，一个可能的解决方法是使用 HTML 实体： <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 现在浏览器将每个选项的全部内容视为文本。这是 Jquery 代码： $('#my_select').select2({ minimumResultsForSearch: -1 }); 我偶然发现的最后一件事是在渲染 Select2 和下拉菜单后分别用“<" and ">”符号替换实体“<”和“">”，以默认黑色进入第一个选项框“Item 1”， “20 次通话”为红色（CSS 可用：.color-red {color:red;}）。其他选项框也是如此。 我试图在文档中找到答案，但没有任何效果。例如， $('#my_select').select2({ minimumResultsForSearch: -1, templateResult: function (item) { item.text.replace (/>/g,'>').replace (/</g,'<'); } }); 非常感谢任何有关如何解决此问题的想法。 您需要重写 escapeMarkup 选项以允许 HTML 内容。 在templateResult中，您告知要如何以及以何种方式呈现内容，在本例中，我在每个选项中使用数据文本属性的返回。 $('#my_select').select2({ minimumResultsForSearch: -1, escapeMarkup: function(item) { return item; }, templateResult: function(item) { return $(item.element).data('text'); } }); .color-red { color: #ff0000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <select id="my_select" style="width: 100%;"> <option></option> <option value="1" data-text='Item 1 <span class="color-red">20 calls</span>'>Item 1 20 calls</option> <option value="2" data-text='Item 2 <span class="color-red">10 calls</span>'>Item 2 10 calls</option> <option value="3" data-text='Item 3 <span class="color-red">30 calls</span>'>Item 3 30 calls</option> </select>
我正在尝试在 MultiSelect 控件上使用 Select2 jQuery 库。这些控件工作正常，但我需要更改 select2 用于多选控件的值的默认定界符（分隔符）。
我输入的文字如下 我使用 select2 $("#xa").select2({...}); 现在，我想在我发邮件时收到短信...
动态设置选项时，select2 allowedClear 不启用
当我创建由另一个 select2 下拉列表中的选择动态驱动的 select2 下拉列表时，更新后的下拉列表的 allowedClear 按钮将被禁用。 好像没什么关系...
Select2 allowedClear 不适用于动态下拉列表
我尝试了很多方法来解决这个问题。 在通过ajax加载的动态列表中，我无法使allowClear工作。 这是我的 jsFiddle HTML： 我尝试了很多方法来解决这个问题。 在通过ajax加载的动态列表中，我无法使allowClear工作。 这是我的jsFiddle HTML： <select id="first" class="init-select2" data-placeholder="First dropdown" data-allowclear="true"> <option></option> <option>First option</option> <option>Second option</option> </select> <select id="second" class="init-select2" data-placeholder="Second Dropdown" data-allowclear="true" disabled="disabled"> <option></option> </select> Javascript： $(function() { $('.init-select2').removeClass('init-select2').each(function(){ if ($(this).attr("data-allowclear") && $(this).attr("data-allowclear") == "true"){ $(this).select2({ allowClear: true }); } else if ($(this).attr("data-allowclear") && $(this).attr("data-allowclear") == "false") { $(this).select2({ allowClear: false }); } }); $('#first').change(function () { var options = []; $.ajax({ type: "POST", url: "/echo/json/", data: {"json":JSON.stringify({"one":"first","two":"second","three":"third"})}, cache: false, success: function(data) { $.each(data, function (index, value) { options.push("<option>" + value + "</option>"); $("#second").find('option').remove().end().append(options).attr("disabled", false).select2({ allowClear: true }); }); } }); }); }); 在jsfiddle中已经添加了select2 javascript和css，请看一下 通过每次更改第一个下拉列表的值时向第二个下拉列表添加 "<option></option>" 来修复。请参阅下面的成功处理程序： $('#first').change(function () { var options = []; $.ajax({ type: "POST", url: "/echo/json/", data: { "json": JSON.stringify({ "one": "first", "two": "second", "three": "third" }) }, cache: false, success: function (data) { options.push("<option></option>"); $.each(data, function (index, value) { options.push("<option>" + value + "</option>"); $("#second").find('option').remove().end().append(options).attr("disabled", false).select2({ allowClear: true }); }); } }); }); 我自己的示例之一，如您所见，我在循环中没有使用“选项”标签。 function companyURL() { if ($.isNumeric($('#supplier_select').val())) { return company_url + '/' + $('#supplier_select').val() + '/'; } else { return company_url; } } var results = []; $('.company_select').select2({ ajax: { url: function () { return companyURL(); }, dataType: 'json', quietMillis: 100, data: function (term) { return { term: term }; }, results: function (data) { results = []; results.push({ id: '', text: 'Select a company' }); $.each(data, function (index, item) { results.push({ id: item.company_id, text: item.company_name }); }); return { results: results }; } } }); 有时由于文本太长，关闭按钮不起作用。使用此 CSS 代码。 <style> .select2-selection__clear { position: absolute !important; right: 20px !important; } </style>
$("#s1").select2(选项1); $("#s2").select2(options2); $("#s1").on("select2:选择", function(e) { // doSomethingThatSynchronizesS1withS2(); }); 我有两个 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(); });
我正在尝试在 .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 中的选项，但是当我单击按钮时它不起作用； 我的代码 <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”参数添加到函数声明中。