jquery-select2 相关问题

如何在Jquery-Select2中设置多值选择中的选定值？

我正在将下拉列表与 Jquery-Select2 绑定。它工作正常，但现在我需要使用 Jquery-Select2 绑定我的多值 selectBox。 我的下拉菜单 我正在使用 Jquery-Select2 绑定我的下拉菜单。它工作正常，但现在我需要使用 selectBox 绑定我的多值 Jquery-Select2。 我的下拉菜单 <div class="divright"> <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="" > <option value=" ">No illustrations</option> <option value="a">Illustrations</option> <option value="b">Maps</option> <option value="c">Portraits</option> </select> </div> 从此链接http://ivaynberg.github.com/select2/我正在使用多值选择框，我可以绑定我的下拉菜单 $("dropdownid").Select2() 它工作正常，但现在我需要在编辑模式下将所选值放入我的下拉列表中所以我使用这个示例： $(".Books_Illustrations").select2("val", ["a", "c"]); 它正在工作，但我该如何修复我的选择，因为用户可以选择任何内容。所以我不能静态地编写 a,c 这就是为什么我需要在编辑模式下动态绑定我的选定值。 我想现在你们都清楚我的要求了。如果您需要进一步的许可，请告诉我。 实际上你只需要 $.each 来获取所有值，它将帮助你jsfiddle.net/NdQbw/5 <div class="divright"> <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> <option value=" ">No illustrations</option> <option value="a" selected>Illustrations</option> <option value="b">Maps</option> <option value="c" selected>selectedPortraits</option> </select> </div> <div class="divright"> <select id="drp_Books_Ill_Illustrations1" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> <option value=" ">No illustrations</option> <option value="a">Illustrations</option> <option value="b">Maps</option> <option value="c">selectedPortraits</option> </select> </div> <button class="getValue">Get Value</button> <button class="setValue"> Set value </button> <div class="divright"> <select id="drp_Books_Ill_Illustrations2" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> <option value=" ">No illustrations</option> <option value="a" selected>Illustrations</option> <option value="b">Maps</option> <option value="c" selected>selectedPortraits</option> </select> </div> <div class="divright"> <select id="drp_Books_Ill_Illustrations3" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> <option value=" ">No illustrations</option> <option value="a">Illustrations</option> <option value="b">Maps</option> <option value="c">selectedPortraits</option> </select> </div> <button class="getValue1">Get Value</button> <button class="setValue1"> Set value </button> 剧本： var selectedValues = new Array(); selectedValues[0] = "a"; selectedValues[1] = "c"; $(".getValue").click(function() { alert($(".leaderMultiSelctdropdown").val()); }); $(".setValue").click(function() { $(".Books_Illustrations").val(selectedValues); }); $('#drp_Books_Ill_Illustrations2, #drp_Books_Ill_Illustrations3').select2(); $(".getValue1").click(function() { alert($(".leaderMultiSelctdropdown").val()); }); $(".setValue1").click(function() { //You need a id for set values $.each($(".Books_Illustrations"), function(){ $(this).select2('val', selectedValues); }); }); 我发现这篇文章很旧，但 select2 的工作方式现在已经发生了变化，这个问题的答案非常简单。 在多选2中设置值如下 $('#Books_Illustrations').val([1,2,3]).change(); 不再需要在 jquery 中指定 .select2，只需 .val 有时您不想触发 change 事件，因为您可能还有一些其他代码要执行，如果您使用上面的方法，就会发生这种情况，所以为了解决这个问题，您可以在不触发的情况下更改值像这样的change事件 $('#Books_Illustrations').select2([1,2,3], null, false); 如果这不起作用，您也可以这样做以不触发更改事件 $('#Books_Illustrations').select2(); $('#Books_Illustrations').val('some_value'); 所以我认为你想要默认选择2个选项，然后获取它的值？如果是这样： http://jsfiddle.net/NdQbw/1/ <div class="divright"> <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple=""> <option value=" ">No illustrations</option> <option value="a" selected>Illustrations</option> <option value="b">Maps</option> <option value="c" selected>selectedPortraits</option> </select> </div> 并获得价值： alert($(".leaderMultiSelctdropdown").val()); 设置值： $(".leaderMultiSelctdropdown").val(["a", "c"]); 您还可以使用数组来设置值： var selectedValues = new Array(); selectedValues[0] = "a"; selectedValues[1] = "c"; $(".Books_Illustrations").val(selectedValues); http://jsfiddle.net/NdQbw/4/ 使用 select2 jquery 库： $('#selector').val(arrayOfValues).trigger('change') var valoresArea=VALUES // it has the multiple values to set separated by comma var arrayArea = valoresArea.split(','); $('#area').select2('val',arrayArea); This is with reference to the original question $('select').val(['a','c']); $('select').trigger('change'); 看看这个会有帮助的。 var valoresArea=VALUES // it has the multiple values to set, separated by comma var arrayArea = valoresArea.split(','); $('#area').val(arrayArea); 网址是- 链接 您可以将选定的值添加到 array 中并将其设置为默认选择的值 例如： var selectedItems =[]; selectedItems.push("your selected items"); .. $('#drp_Books_Ill_Illustrations').select2('val',selectedItems ); 试试这个，这肯定有效！ 这行不通。即使列表中两个选项均可用，也仅预先选择一个值，仅显示第一个值 ('#searchproject').select2('val', ['New Co-location','Expansion']); 使用 select2 库有 2 种设置值的方法 1.当存在单个值时，您可以将其作为字符串传递 $("#elementid").select2("val","valueTobeset") 2.当您将 select2 与多选选项一起使用时，您可以将值数组传递给 select2，所有这些值都将被设置 var arrayOfValues = ["a","c"] $("#elementid").select2("val",arrayOfValues) 请记住，您可以通过传递数组来设置多选的单个值，也像这样 var arrayOfValues = ["a"] $("#elementid").select2("val",arrayOfValues) 使用如下多选功能。 $("#drp_Books_Ill_Illustrations").val(["val1", "val2"]).trigger("change"); 选择全部 $('select[name=eventsFilter]').find('option').attr('selected', true); $('select[name=eventsFilter]').select2(); 取消选择全部 $('select[name=eventsFilter]').find('option').attr('selected', false); $('select[name=eventsFilter]').select2(""); 不需要做那么多事情。 使用多个 select2 设置值 var selectedvalue =“1,2,3”; //如果选择了前 3 个产品。 $('#ddlProduct').val(selectedvalue); $('#area').select2().val(arrayArea).trigger('change'); 我以前很喜欢这个，我正在使用 select2 version4。我得到结果了 这对我有用： $(".Books_Illustrations").val(["a", "c"]).trigger('change'); 使用如下多选功能。 $('#drp_Books_Ill_Illustrations').multiSelect('select', 'value');

jQuery Select2 onkeyup 未触发

我尝试使用 AJAX 调用更新 Select2 输入字段的选项，但链接到输入字段的 onkeyup 函数未运行。 *请注意，当我设置时，onkeyup 函数会运行...

如何使用javascript更改选择2的背景颜色？

演示和我的代码是这样的：http://jsfiddle.net/fc1qevem/10/ 我的 JavaScript 代码是这样的： var select02 = $('#select02'); $(select02).select2({ 数据： [{ 编号: 0, 文字：“

Select2 TypeError：无法使用“in”运算符在ajax请求中搜索未定义的“状态”

我正在尝试在我的 Laravel 项目上使用 ajax 进行 select2，这正在发生： 控制台中出现错误 错误线 这是我的js： 导入“选择2”； 让baseurl = window.location.origin; $(窗口...

当我们单击“选择 2”下拉菜单时，将焦点设置到搜索文本字段

我正在使用 select2.js 版本：3.4.3 和 bootstrap 我有一个下拉菜单。 当我单击下拉菜单时，我会得到一个包含搜索文本字段的列表。 但我的光标没有集中在搜索文本字段上。 <...

尝试从 select2 选择选项检索数据时，未捕获类型错误：jQuery(...).counterUp 不是函数错误

我有一个select2多个框，其中包含从我的Laravel控制器压缩的“package_name”数据和“price”值，以及2个用于总价格和ordered_pacakage的文本框...

尝试从 select2 选择选项检索数据时，未捕获的类型错误：jQuery(...).counterUp 不是我的控制台上的函数错误

我有一个select2多个框，其中包含从我的laravel控制器压缩的“package_name”数据和“price”值，以及2个用于totalprice和ordered_pacakage的文本框，我

Select2 在向 DOM 添加另一个元素时会破坏自身

我有一个带有单个选择字段的表单。我已将 select2 附加到它。通过 Javascript，我在客户端本身添加/删除更多此类字段。随机地，添加的字段之一会丢失这些...

无法按“x”删除所选选项

<head> <script src="https://code.jquery.com/jquery-3.5.1.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> </head> 기본형 <br> <div> <select class="js-example-basic-multiple" name="states[]" multiple="multiple"> <option value="apple">apple</option> <option value="banana">banana</option> <option value="melon">melon</option> </select> <script> $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); </script> </div> <br> 넓이 조절 <br> <div> <select class="js-example-basic-multiple" name="states[]" multiple="multiple" id="test2" style="width: 75%"> <option value="tommy">Tommy</option> <option value="jason">Jason</option> </select> <script> $(document).ready(function() { $(#test2).select2({ width: 'resolve' }); }); </script> </div> <br> 라벨 붙이기 <br> <div> <label for="id_label_multiple">라벨 샘플 <select class="js-example-basic-multiple js-states form-control" name="states[]" multiple="multiple" id="test3" style="width: 75%"> <option value="tommy">Tommy</option> <option value="jason">Jason</option> </select> </label> <script> $(document).ready(function() { $(#test3).select2({ width: 'resolve' }); }); </script> </div> 以上代码取自：here。它适用于 codepen 和 stackoverflow。所以代码可以工作，但是当我将相同的代码复制到我的网络应用程序中时，无法按下按钮。我认为有一些原因导致该元素不可点击。可能的原因应该是什么？ 单击按钮上的检查，DOM 树将我带到与所需元素不同的元素。 .select2-selection__rendered { pointer-events: none; } 这阻止了按钮被点击。

将数组传递给Select2中的val

我在设置“Select2”的选定值时遇到问题。 当我传递以逗号分隔的 id 值时，它可以工作。但如果类似数组的传递不起作用。 这是我的选择 我在设置“Select2”的选定值时遇到问题。 当我传递以逗号分隔的 id 值时，它可以工作。但如果类似数组的传递不起作用。 这是我的选择 <select class="form-control" id="myselect" multiple="multiple"> <option id="1">Value1</option> <option id="2">Value2</option> <option id="3">Value3</option> <option id="4">Value4</option> <option id="5">Value5</option> </select> 有效 $("#myselect").select2().select2('val', [1,2,3]); 但这行不通 var array_selection = [1,2,3]; $("#myselect").select2().select2('val', [array_selection]); 您正在将 array_selection 数组放入另一个数组中。改变 var array_selection = [1,2,3]; $("#myselect").select2().select2('val', [array_selection]); 到 var array_selection = [1,2,3]; $("#myselect").select2().select2('val', array_selection); 我认为在设定值.trigger('change')后添加$("#myselect").select2().select2('val', array_selection).trigger('change');会起作用 或者像这样 var array_selection = [1,2,3]; $("#myselect").select2().val(array_selection).trigger('change');

Select2() 不是函数

我已经下载了 select2 并通过将其放入我的文件夹中来“安装它”。 然后我将其加载到我的网站上，当我检查控制台时，我可以看到文件 select2.js （我在其中看到所有

在ajax获取内容中使用JS select2 init加载eModal不会第一次被调用

我接手了一个项目，遇到了以下问题。 当点击按钮加载eModal时，通过ajax获取的文件中的JS将select变成select2倍数不是

如何使select2只读？

我知道 select2 不存在“只读”功能。请检查这里。 我该如何实现这一目标？ 任何帮助，将不胜感激。 谢谢。 注意：我不能使用禁用。如果我使用残疾人，我不会...

如何初始化具有相同类的页面上的所有 Select2 下拉列表

我正在使用 http://ivaynberg.github.io/select2/ 中的 Select2 现在我正在初始化下拉菜单，如下所示： $(文档).ready(函数() { $('.form_control').select2({ </desc> <question vote="2"> <p>我正在使用来自 <a href="http://ivaynberg.github.io/select2/" rel="nofollow">http://ivaynberg.github.io/select2/</a></p> 的 Select2 <p>现在我正在初始化下拉菜单，如下所示：</p> <pre><code> &lt;script&gt; $(document).ready(function() { $(&#39;.form_control&#39;).select2({ minimumResultsForSearch: -1 }); }); &lt;/script&gt; </code></pre> <p>问题是，我有一个页面动态生成基于下拉菜单的订单，因此我将在同一页面上有多个具有相同类的下拉菜单和表单，如下所示：</p> <pre><code>&lt;select id=&#34;order_status&#34; class=&#34;form-control&#34; name=&#34;order_status&#34;&gt; &lt;option value=&#34;&#34;&gt;Option 1&lt;/option&gt; &lt;option value=&#34;&#34;&gt;Option 2&lt;/option&gt; &lt;/select&gt; </code></pre> <p>当我这样做时，第一个下拉列表初始化得很好，但同一页面上的所有其他下拉列表都没有初始化。如何让它初始化所有 form_control 下拉列表？</p> <p>JSFiddle：<a href="http://jsfiddle.net/hryoy8rc/1/" rel="nofollow">http://jsfiddle.net/hryoy8rc/1/</a></p> </question> <answer tick="false" vote="4"> <p>它是当前版本中的一个错误，我在使用 4.0.0 时遇到了同样的问题，它将解决您的问题： <a href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js</a></p> </answer> <answer tick="false" vote="3"> <p>尝试下面的代码...</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>$(&#39;.form_control&#39;).each(function(index, element) { $(this).select2({ minimumResultsForSearch: -1 }); });</code></pre> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;select id=&#34;order_status&#34; class=&#34;form-control&#34; name=&#34;order_status&#34;&gt; &lt;option value=&#34;&#34;&gt;Option 1&lt;/option&gt; &lt;option value=&#34;&#34;&gt;Option 2&lt;/option&gt; &lt;/select&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>我最终为每个下拉列表提供了一个动态生成的 ID，例如 drop_003，然后在主体内将其初始化，如下所示：</p> <pre><code>&lt;script&gt; $(&#39;#drop_003&#39;).select2({ minimumResultsForSearch: -1 }); &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>我正在使用 Select2 4.0.2 版本，此代码片段对我有用。它将把页面中的所有 select 元素初始化为 Select2。</p> <pre><code>$(document).ready(function () { $(&#39;select&#39;).select2(); }); </code></pre> </answer> <answer tick="false" vote="0"> <p>为了动态生成框，我必须实际循环选项而不是使用助手。</p> <p>解决方案在这里：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(&#39;.myselect&#39;).select2(); </code></pre> <pre><code>&lt;link href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34;/&gt; &lt;link href=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css&#34; rel=&#34;stylesheet&#34;/&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js&#34;&gt;&lt;/script&gt; &lt;form action=&#34;&#34; method=&#34;POST&#34; role=&#34;form&#34;&gt; &lt;p&gt; working boxes &lt;/p&gt; &lt;select class=&#34;form-control myselect&#34;&gt; &lt;option&gt;Service 1&lt;/option&gt; &lt;option&gt;Service 2&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;br&gt; &lt;select class=&#34;form-control myselect&#34;&gt; &lt;option&gt;Service 1&lt;/option&gt; &lt;option&gt;Service 2&lt;/option&gt; &lt;/select&gt; &lt;/form&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

Select2 下拉菜单间歇性加载以前的数据

我正在努力解决有关我创建的编辑页面的下拉列表的问题。文本字段很好并且总是加载，但是下拉菜单确实是间歇性的，有时会加载一些......

使用来自ajax调用的数据初始化select2

我有一个带有 GET 方法的 API sewatanah/getprovinsi，它将返回： [{"id":"0","text":""},{"id":"11","text":"ACEH&...

如何修改Select2 AllowClear函数？

我为 Select2 Selection 创建了一个自定义适配器，我想在其中直接在选择而不是下拉列表中显示输入字段。 $.fn.select2.amd.define('SearchableSingleSelection', [ '选择...

使用 select2 时不显示下拉列表（使用 Thymleaf 和 Bootstrap5）

我的脚本代码如下 函数查找部门（）{ $("#department").select2({ dropdownPosition: '下方', 占位符：“部门”， 允许清除：真， ...

使用 jquery select2 的单词部分搜索选择选项

举个例子。如果有一个选项是“Eyes Nose”，那么我想搜索输入为“Ey No”的选项。 Select2 无法在此处建议该选项。 默认情况下，如果我们只是...

下拉使用 Jquery 插件 select2

我有一个使用 Jquery 插件 Select2 的下拉菜单。下拉工作正常。问题是我有几个使用 Select2 插件的下拉列表。所有这些下拉菜单都具有相同的类名。我...