jquery-select2 相关问题

Select2 Ajax 请求授权未发送

尝试向需要身份验证令牌的端点发出获取请求。但每当发出请求时，它都会返回 401 错误（“需要授权标头”）。令牌被检索

在 PHP 中，如何使用 select2(Jquery pulgin) 显示选定的值

我需要在 select2 的选择框中输入多个值，但它选择了最后一个。 我可以将苹果、番茄插入数据库，但浏览器中的 select2 中仅显示番茄。 这是代码...

Ajax js 中的分页下拉选项

我有两个选择字段。州和城市。按州选择显示城市列表。但在Android手机上，它出现得很晚（很慢）。这就是为什么我想分页。 如何分页

如何更改select2（引导主题）上选择框的背景颜色

c 的 javascript $(文档).ready(函数() { $('.js-example-basic-single').select2({ 主题：“bootstrap-5” }); }); HTML c 的 javascript $(document).ready(function() { $('.js-example-basic-single').select2({ theme: "bootstrap-5" }); }); HTML <select class="js-example-basic-single bg-dark" style="background-color: #343a40 ! important;" name ="state"></select> 它在街区附近失踪了，这是它目前的样子。我只是找不到改变背景颜色的标签名称。 如果您想查找 HTML 文档中某个元素的标签名称，您可以使用浏览器的开发人员工具进行检查。具体方法如下： 在浏览器中打开您的网页。 右键单击要查找其标签名称的元素。 从上下文菜单中选择“检查”或“检查元素”。这将打开浏览器的开发者工具。 在开发者工具的 HTML 面板中，您将看到所选元素突出显示。元素的标签名称将显示在突出显示的行的开头。 或者，您可以将鼠标悬停在开发人员工具的“元素”面板中的元素上，标签名称将显示在工具提示中。 一旦确定了标签名称，您就可以使用 jQuery 或任何其他方法来定位元素，以修改其样式或属性。

如何覆盖 Django 管理中特定模型字段的自动完成视图？

我需要重写特定ForeignKey的Select2小部件在Django（4.1）管理中的行为方式。 也就是说，我正在尝试增加 AJAX 请求返回的对象数量，并且

如何选择jquery无序下拉列表selenium webdriver

我可以编写java代码来选择下拉列表，如果它有正常的选择类，例如：- new Select(driver.findElement(By.id("someid"))).selectByValue("1")); 但下面...

设置现有Select2的dropdownParent

我有一个 Select2，它是 Django 的自动完成小部件。由于 Firefox 在模式内部时不关注 Select2 的一个已知问题，我使用此行添加 dropdownParent： $("#id_pro...

无法设置select2的值

我已经初始化了一个select2 用通过 AJAX 请求生成的列表填充它。 它有一个

如何配置ajax select2以使用条形码扫描仪

我有一个ajax select2（v 3.5.4）完美工作，但现在我需要它与条形码扫描仪一起使用。 我需要检测何时按下回车键。扫描仪将代码插入 select2 输入中...

如何使用Select2获得一个简单的多选框

我想在我的html文档中使用select2库，因为它有一个我想使用的药盒样式选择控件。 我按照...

select2 - 删除 js 插入的项目将其保留为选项

我有一个标准的 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>

Laravel 8 中的 jQuery Select2

我不知道问题出在哪里 这是 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 的脚本标签

select2 未正确触发更改事件

我有一个带有选择元素的 HTML 表单。不过我正在使用 select2 库。我想监听表单输入的变化。我添加了一个更改事件侦听器。然而，即使我改变了这个选项

如何在select2框架中使用占位符作为默认值

要获取我正在使用的 select2 的选定值： var x = $("#select").select2('data'); var select_choice = x.text 问题是，如果没有选择值，这会引发错误，我很奇怪......

Select2 中的样式选择选项

问题是如何在选项的一部分上应用样式。 我有一个像这样的选择： 项目 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 &lt;span class="color-red"&gt;20 calls&lt;/span&gt;</option> <option value="2">Item 2 &lt;span class="color-red"&gt;10 calls&lt;/span&gt;</option> <option value="2">Item 3 &lt;span class="color-red"&gt;30 calls&lt;/span&gt;</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 (/&gt;/g,'>').replace (/&lt;/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>

如何将select2多选控件的分隔符更改为分号？

我正在尝试在 MultiSelect 控件上使用 Select2 jQuery 库。这些控件工作正常，但我需要更改 select2 用于多选控件的值的默认定界符（分隔符）。

Select2 jquery - 如何获取选择框中的文本

我输入的文字如下 我使用 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>

同步 2 个 Select2 元素

$("#s1").select2(选项1); $("#s2").select2(options2); $("#s1").on("select2:选择", function(e) { // doSomethingThatSynchronizesS1withS2(); }); 我有两个 select2 元素，我想要...