jquery-select2 相关问题

如何让jquery select2动态禁用一个选项？

我有一些多选，我使用jquery select2。当在一个多选中选择此选项时，我想禁用其他多选中的一个选项。 我写了这段代码，但它确实有效。 $(“选择。

初始化控制时忽略Select2数据

我的HTML代码是： {{-- 主题 0 当 我的 HTML 代码是： <select id="block-permissions" name="permissions" multiple="multiple"> {{-- <option value="0">Topic 0</option> When uncomment works fine! --}} </select> 我的JS代码是： $(function() { // const permissions = @json($permissions) // const permissions = { results: [{ text: "Group 1", children: [{ id: 1, text: "Topic 1", selected: true }, { id: 2, text: "Topic 2", selected: true }, { id: 3, text: "Topic 3", selected: false } ] }] } $('#block-permissions').select2({ data: permissions, }) }) Select2 控件仅适用于 Topic 0（预定义的 HTML 数据），但完全忽略 JS 数据。 怎么了？ 我必须修改文档中的内容以删除“结果”键并设置您的对象，如下所示： const permissions = [{ text: "Group1", children: [{ id: "1", text: "Option 1", selected: true }, { id: "2", text: "Option 2", selected: true } ] }, { text: "Group2", children: [{ id: "3", text: "Option 3", selected: true }, { id: "4", text: "Option 4", selected: false } ] } ]; 这是一个工作代码片段： $(function() { const permissions = [{ text: "Group1", children: [{ id: "1", text: "Option 1", selected: true }, { id: "2", text: "Option 2", selected: true } ] }, { text: "Group2", children: [{ id: "3", text: "Option 3", selected: true }, { id: "4", text: "Option 4", selected: false } ] } ]; $('#block-permissions').select2({ placeholder: 'Select one ore more', data: permissions }); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <select style="min-width:25%;width:25%;" id="block-permissions" name="permissions" multiple="multiple"> </select> <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

如何将 Select2 与 TailwindCSS 一起使用？

我在一个项目中使用 TailwindCSS，并且我必须使用 Select2 （与 laravel）。 问题是，CSS 格式（也不是下拉 js 机制）不适用于 Select2 多个复选框。 我有

对 ng-select2-component 中选定的项目进行排序

我在 Angular 15 中有一个项目，它使用 ng-select2-component npm 库作为下拉组件（单个和多个）。选定的下拉值本身附加到表单组

Blazor + select2 + @bind

当我使用select 2时我无法获取值，它总是返回null。 你能帮助我吗？我已经尝试过@bind、@onchange，但没有任何效果。 我的代码： 当我使用 select 2 时，我无法获取值，它总是返回 null。 你能帮我吗？我已经尝试过 @bind、@onchange 但没有任何效果。 我的代码： <select class="form-select" data-control="select2" data-placeholder="Select an option" id="I18NCodeSelect" data-dropdown-parent="#kt_modal_add_form" @bind="_newModel.CodeI18NId"> <option value="">Select I18N Code</option> @if (i18nCodes != null && i18nCodes.Any()) { @foreach (var i18nCode in i18nCodes) { <option value="@i18nCode.Id" selected="@(_selectedLanguage == i18nCode.Code)"> @i18nCode.Code </option> } } else { <option value="" disabled>Loading languages...</option> } </select> <label for="_selectedCodeI18NResponse">Language</label> </div> <p>You selected: @_newModel.CodeI18NId</p> </div> 每次使用 select2 都会返回 null 您选择了：@_newModel.CodeI18NId 我尝试使用@onchange，@bind，如果我使用select2，这里的勇气你选择了：@_newModel.CodeI18NId它每次都是空的。 你不能/不应该使用像 select-2 这样的 JavaScript 库来操作 select-object。据我所知，select-2使用javascript来修改html代码，这很糟糕，因为Blazor不知道这种修改。 Blazor 需要知道浏览器的 UI/DOM 中发生了什么，任何修改都可能会导致意外行为，例如这样。 您是否尝试过研究其他组件，例如 MudBlazor 的自动完成字段？ https://mudblazor.com/components/autocomplete#visual-playground 您可能还可以使用其他独立组件，而无需导入“整个”MudBlazor，但我认为您应该考虑 select-2 之外的其他解决方案。

使用 <select>

假设您有以下 HTML5 AA BB 假设您有以下 HTML5 <select id="example"> <option value="AA" data-id="143">AA</option> <option value="BB" data-id="344">BB</option> </select> $("#example").select2(); 如何从所选选项中获取数据ID？ select2 没有直接的方法，您可以使用 select2 数据和 jQuery 的组合，如下所示： $("#example").select2().find(":selected").data("id"); 首先获得 select2 数据，然后使用 jQuery 找到所选选项，最后找到数据属性。 Select2 v4 依赖于 <select> 标签而不是隐藏的 <input> 标签，因此现在可以更轻松地获取选定的一个或多个选项：您只需引用原始的 <select>。 Select2 v3 也可能出现这种情况，但我只使用过 Select2 v4。 $('#example option:selected').attr('data-id') jsfiddle演示 另请参阅使用 JavaScript 在下拉列表中获取所选值？ 编辑：我喜欢这个答案用于通用数据对象访问： var d = $("#dropdown").select2("data"); d 将是一个包含所选项目作为对象的数组，因此要访问第一个项目的 id 属性： var id = d[0].id; $(document).ready(function() { $('select#myselect').select2({ templateResult: formatOutput }); }); function formatOutput (item) { var $state = $(item.element).data('id') + ' ' + item.text; return $state; }; 如此简单，使用 jquery api [针对 select2 4.x 版本进行测试] $('#select').on('select2:select', function (e) { let id = $(e.params.data.element).data('id'); }); 经过几个小时的尝试解决这个问题，我成功地提取了该属性。我用的是3.5.4 $("#select2").select2('data').element[0].attributes[1].nodeValue HTML <select id="select2" name="course" class="form-control"> <option></option> <optgroup label="Alabama"> <option value="City 1" data-url="/alabama/city-1">City 1</option> <option value="City 2" data-url="/alabama/city-2">City 2</option> </optgroup> </select> $("#select2").select2('data').element[0].attributes[0].nodeValue --> Value Attribute $("#select2").select2('data').element[0].attributes[1].nodeValue --> Data-URl Attribute 我们可以简单地这样做，例如： $(this).find(":selected").data("id") 我对如何使用 Select2 事件获取所选选项的数据属性值的贡献（3.5）（感谢 @loreto g 的回答）： <select id="myselect"> <option value="foo" data-type="bar" data-options='baz'></option> </select> <script> var myselect = $('#myselect').select2(); myselect.on('select2-selecting', function(sel){ var seltype = sel.choice.element[0].attributes['data-type'].value, seloptions = sel.choice.element[0].attributes['data-options'].value; }); </script> 希望这有帮助 这是我的处理方法。不确定 opt-groups。 HTML <select id="myselect" name="myselect"> <option value="" data-url=""></option> <option value="City 1" data-url="/alabama/city-1">City 1</option> <option value="City 2" data-url="/alabama/city-2">City 2</option> </select> JAVASCRIPT $("#myselect").select2({ width: '100%', templateSelection: function (data, container) { // Add custom attributes to the <option> tag for the selected option $(data.element).attr('data-url', data.dataset.url); return data.text; } }); var url = $("#myselect").find(':selected').data('url'); 我使用 select2 动态加载所有选项（从数组），这就是我能够成功使用的： $('#element').select2('data')[0].dataAttribute; 其中选择的 id 是“element”，dataAttribute 是我尝试检索的选项的自定义属性。 Ad Per @Kalzem 示例工作得很好但是你必须像这样提及你的属性 data-attributeName 。您必须首先提及 data，然后提及您的 attributes 名字。示例：<option value="AA" data-attributeName="143">AA</option>，您将通过 $("#example").select2().find(":selected").data("attributeName"); 获得数据

Select2 重新初始化不起作用

我有一个选择框，它依赖于另一个选择框。我正在使用 AJAX 更改第二个（从属）选择框上的选项。另外，我在两个选择框上使用 select2 插件，有些

Select2 - 在开头显示所有结果，但在 4 个字符后开始过滤

我想用 select2 实现的是在单击选择时显示所有选项（这是默认行为），但仅在

Select2 无法选择 input 中的元素

我正在为 select2 苦苦挣扎。 我有一个 ajax 调用，它返回一个 json。 json 的格式如下（来自服务器）： 公共函数 get_groups() { $结果=数组(); $s...

错误：附加到 <select> 元素 woocommerce

任何人都可以帮助我在这个错误上浪费太多时间，但没有运气 错误：附加到 a 时，Select2 不允许使用选项“ajax” 元素。 更新后，此错误显示在我的开发者控制台中...

jQuery select2 与 dropdownlist asp.net 服务器控件一起使用

我正在尝试将它与 asp.net 服务器运行下拉列表一起使用。当 asp.net 控件在页面上呈现时，它具有不同的 id，例如：“ctl00_ContentPlaceHolder1_ddlAgentName”等...

在Select2中获取并缓存结果

我的应用程序使用 select2 显示通过 Ajax 调用检索的姓名列表。 它使用 select2 ajax 功能。 但问题是每当我在 s 上输入时 select2 都会获取项目...

搜索时选择2下拉菜单检查任何字符的出现，需要更改为仅检查第一个字符

我有一个 select2 下拉列表，如下所示： 我需要改变它的搜索方法： 我在下拉列表中有以下值： 苹果 我有一个select2下拉菜单，如下所示： 我需要改变它的搜索方法： 我在下拉列表中有以下值： <option value="1">Apple</option> <option value="2">Orange 2</option> <option value="3">Banana</option> <option value="4">Mango</option> <option value="5">Pomegranate</option> 当我搜索 Mango 时，它显示 Mango 和 Pomegranate，因为两者都包含字母 M。 我只需要按第一个字符搜索，就像当我用字母M搜索时，它应该只给出Mango，而不应该检查中间的字符！！ 检查我的小提琴：FIDDLE 您可以创建一个自定义匹配器。 如文档中所写： 自定义匹配器使用仅捆绑在 Select2 完整版本中的兼容性模块。您还可以选择使用更复杂的匹配器。 编辑 在这里你可以找到一个实现你需要的代码的小提琴。 这是官方文档参考 $(document).ready(function () { // Single select example if using params obj or configuration seen above var configParamsObj = { placeholder: 'Select an option...', // Place holder text to place in the select minimumResultsForSearch: 3, // Overrides default of 15 set above matcher: function (params, data) { // If there are no search terms, return all of the data if ($.trim(params.term) === '') { return data; } // `params.term` should be the term that is used for searching // `data.text` is the text that is displayed for the data object if (data.text.toLowerCase().startsWith(params.term.toLowerCase())) { var modifiedData = $.extend({}, data, true); modifiedData.text += ' (matched)'; // You can return modified objects from here // This includes matching the `children` how you want in nested data sets return modifiedData; } // Return `null` if the term should not be displayed return null; } }; $("#singleSelectExample").select2(configParamsObj); }); .selectRow { display : block; padding : 20px; } .select2-container { width: 200px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> <body>Single select example <div class="selectRow"> <select id="singleSelectExample"> <option></option> <option value="1">Apple</option> <option value="2">Orange 2</option> <option value="3">Banana</option> <option value="4">Mango</option> <option value="5">Pomegranate</option> </select> </div> </body>

选择2个搜索选项

我下载了 Select2 jquery 插件并完成了所有设置 - 我这里有一个基本的下拉菜单。 男 我下载了 Select2 jquery 插件并进行了全部设置 - 我这里有一个基本的下拉菜单。 <SELECT NAME="GENDER"> <OPTION VALUE="1">MALE <OPTION VALUE="2">FEMALE <OPTION VALUE="3">UNDEFINED </SELECT> 我应用了该插件并且它可以工作 - 不是问题。 我一直在查看 select2 文档，我想做的不是按性别搜索，例如输入女性和男性等 - 我希望用户只需按 1，这样它就会显示男性，2 代表女性。 有人在 select2 中尝试过这个吗？ 查看文档中的“匹配器”选项：http://ivaynberg.github.io/select2/#documentation 重写匹配器函数以检查给定选项的 text() 和 val()。未经测试的示例： $('select').select2({ matcher: function(term, text, option) { return text.toUpperCase().indexOf(term.toUpperCase())>=0 || option.val().toUpperCase().indexOf(term.toUpperCase())>=0; } }); 自从回答此问题后，“匹配器”选项的参数已更改。我在实现美国州下拉列表时遇到了同样的问题，每个选项都像<option value="PA">Pennsylvania</option>，我希望用户能够拼写州或简单地键入他们的代码并且它可以工作。根据更新的文档，我修改如下： $('select').select2({ matcher: function(params, data) { // If there are no search terms, return all of the data if ($.trim(params.term) === '') { return data; } // Do not display the item if there is no 'text' property if (typeof data.text === 'undefined') { return null; } // `params.term` is the user's search term // `data.id` should be checked against // `data.text` should be checked against var q = params.term.toLowerCase(); if (data.text.toLowerCase().indexOf(q) > -1 || data.id.toLowerCase().indexOf(q) > -1) { return $.extend({}, data, true); } // Return `null` if the term should not be displayed return null; } }); 这是我制作的一个工作 CodePen 演示，它使用 OP 的选择字段和美国各州的选择字段来演示这一点。 我采纳了@Tessa上面的精彩答案，并使其与optGroup一起工作。 function(params, option) { // If there are no search terms, return all of the option var searchTerm = $.trim(params.term); if (searchTerm === '') { return option; } // Do not display the item if there is no 'text' property if (typeof option.text === 'undefined') { return null; } var searchTermLower = searchTerm.toLowerCase(); // `params.term` is the user's search term // `option.id` should be checked against // `option.text` should be checked against var searchFunction = function(thisOption, searchTerm) { return thisOption.text.toLowerCase().indexOf(searchTerm) > -1 || (thisOption.id && thisOption.id.toLowerCase().indexOf(searchTerm) > -1); }; if (!option.children) { //we only need to check this option return searchFunction(option, searchTermLower) ? option : null; } //need to search all the children option.children = option .children .filter(function (childOption) { return searchFunction(childOption, searchTermLower); }); return option; } $('select').select2({ matcher: function(params, data) { // Do not display the item if there is no 'text' property if (typeof data.text === 'undefined') { return null; } // If there are no search terms, return all of the data if (params.term === '' || typeof params.term === 'undefined') { return data; } else { // `params.term` is the user's search term // `data.id` should be checked against // `data.text` should be checked against // console.log(params.term.toLowerCase()); var q = params.term.toLowerCase(); if (data.text.toLowerCase().indexOf(q) > -1 || data.id.toLowerCase().indexOf(q) > -1) { return $.extend({}, data, true); } } // Return `null` if the term should not be displayed return null; } });

Select2 -- 占位符不显示

我在我的 asp.net mvc 5 应用程序中使用 Select2 插件。根据文档 如果您需要更多，占位符选项允许您传入数据对象而不仅仅是字符串

带有复选框选项的Select2 js

我想在我的选项中选择复选框，但不知道该怎么做。 参考 这是我的选择框代码： 我想在我的选项中选择复选框，但不知道该怎么做。 参考文献 这是我的选择框代码： <select class="form-control select2" id="data-set" name="data[]" multiple="multiple"> @foreach($data as $row) <option value="{{ $row->name }}">{{ $row->name }}</option> @endforeach </select> JS代码： $('#lawFirms').select2({ placeholder: "Select options", allowClear: true }); 我建议查看其他线程，其中还有其他一些可能对您有帮助的好答案。

第一次打开模态时Select2显示两次

我有一个模态，该模态使用js动态显示内容。模态 html 是这样的： 我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？ 我尝试过在模态之外初始化它，但仍然不起作用。 这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } --> </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } --> </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 我根据 aurelian-scarlat 在 此 GitHub 问题中的评论找到了解决方案 如果你的盒子有一个名为 select2 的类，你会遇到麻烦，因为还有一些其他元素具有相同的类。 所以这是错误的：$('.select2').select2('destroy'); 正确的做法是： $('select.select2').select2('destroy'); 或者更改盒子的类别：$('.select-select2').select2('destroy'); 或者更好的是，使用 id：$('#selectbox').select2('destroy'); 我花了一段时间才弄清楚这一点，我希望它对某人有帮助。 我不能使用类名.select2normalWithouClear，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });

第一次打开时模态框显示两次

我有一个模态，该模态使用js动态显示内容。模态 html 是这样的： 我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？ 我尝试过在模态之外初始化它，但仍然不起作用。 这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } --> </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } --> </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 如果我的问题不清楚，我很抱歉，我对这个领域还是新手。不过，我根据 GitHub 问题中“aurelian-scarlat”的评论找到了一个解决方案： https://github.com/Meteor-Community-Packages/meteor-autoform-select2/issues/44 我无法使用类名“.select2normalWithouClear”，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });

Select2 第一次打开时在模态中显示两次

我有一个模态，该模态使用js动态显示内容。模态 html 是这样的： 我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？ 我尝试过在模态之外初始化它，但仍然不起作用。 这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } --> </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option> <!-- @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } --> </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 如果我的问题不清楚，我很抱歉，我对这个领域还是新手。不过，我根据 GitHub 问题中“aurelian-scarlat”的评论找到了一个解决方案： https://github.com/Meteor-Community-Packages/meteor-autoform-select2/issues/44 我无法使用类名“.select2normalWithouClear”，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });

清除按钮与占位符重叠

我的清除按钮与占位符重叠： 你有遇到过这个问题吗？ 我正在为 select2 使用 bootstrap5 主题。 其他一切都有效。 正是这个按钮导致了问题。 谢谢...