jquery-select2 相关问题

除了 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 的方法： $("选择[...

如何使用 Razor 和 MVC 来使用带有多个选项的 select2

我正在尝试使用 Select2、Razor 和 MVC 框架创建一个多项选择列表。我的问题是控制器中接收数组输入的对象始终为空。前端...

如何让 select2 为两个类工作？它只是初始化第二个类

我尝试将 Select2 与两个不同的类一起使用。这两个类用于不同的形式。其中一种适用于桌面形式，另一种适用于移动形式。问题是，只是...

Select2 不显示选项

我目前正在我的 ASP.NET MVC 项目中测试 Select2.js。 对“正常”视图的第一个测试工作正常，但现在我尝试将其添加到加载的部分视图内的选择框......

在远程来源 (AJAX) Select2 中预选选项2

我正在尝试从远程来源的 select2 控件中预选 select2 中的一个选项。我正在尝试遵循文档 在远程源 (AJAX) Select2 中预选选项 我有一个...

将select2 ajax结果显示到模板中

我有 select2 在进行 ajax 调用后显示数据。 $(文档).ready(函数() { $("#citySelect").select2({ 主题：'bootstrap-5'， ...</desc> <question vote="0"> <p>我有 select2 在进行 ajax 调用后显示数据。</p> <pre><code> &lt;script&gt; $(document).ready(function () { $(&#34;#citySelect&#34;).select2({ theme: &#39;bootstrap-5&#39;, placeholder: &#34;Search for your city&#34;, dropdownAutoWidth: true, width: &#39;auto&#39;, minimumInputLength: 3, allowClear: true, async: true, ajax: { url: function (params) { return &#39;@GatewaySettings.Value.Url&#39; + &#39;/api/location/cities/&#39; + params.term; }, contentType: &#34;application/json; charset=utf-8&#34;, type: &#39;GET&#39;, processResults: function (result) { return { results: $.map(result, function (item) { return { id: item.id, text: item.city }; }), }; } } }); }); &lt;/script&gt; </code></pre> <p>我可以搜索城市列表</p> <p>我希望活动搜索结果显示为城市 + ', ' + 州 + ' ' + zip（即洛杉矶，加利福尼亚州 90001），选择后仅显示城市（即洛杉矶）。</p> <p>我正在尝试遵循文档，但我不断得到未定义的结果。</p> <p><a href="https://i.stack.imgur.com/NVBqi.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL05WQnFpLnBuZw==" alt=""/></a></p> <p>这是控制台的输出 <a href="https://i.stack.imgur.com/bdC6m.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2JkQzZtLnBuZw==" alt=""/></a></p> <p>我确信我只是不明白如何使用<a href="https://select2.org/dropdown#templating" rel="nofollow noreferrer">模板</a>。</p> <pre><code> &lt;script&gt; $(document).ready(function () { $(&#34;#citySelect&#34;).select2({ theme: &#39;bootstrap-5&#39;, placeholder: &#34;Search for your city&#34;, dropdownAutoWidth: true, width: &#39;auto&#39;, minimumInputLength: 3, allowClear: true, async: true, templateResult: function (item) { console.log(item); return item.city + &#39;, &#39; + item.state + &#39; &#39; + item.zip; }, templateSelection: function (item) { return item.city }, ajax: { url: function (params) { return &#39;@GatewaySettings.Value.Url&#39; + &#39;/api/location/cities/&#39; + params.term; }, contentType: &#34;application/json; charset=utf-8&#34;, type: &#39;GET&#39;, cache: true, processResults: function (result) { return { results: $.map(result, function (item) { return { id: item.id, text: item.city }; }), }; } } }); }); &lt;/script&gt; </code></pre> <p>任何帮助表示赞赏</p> </question> <answer tick="false" vote="0"> <p>首先，您的 <pre><code>$.map()</code></pre> 很大程度上是多余的，并且还排除了您似乎想要使用的 <pre><code>zip</code></pre> 属性。</p> <p>您真正需要做的就是将数组嵌套在 <pre><code>results</code></pre> 属性下，以便 Select2 可以使用它。</p> <pre><code>ajax: { url: ({ term }) =&gt; &#34;@GatewaySettings.Value.Url&#34; + `/api/location/cities/${encodeURIComponent(term)}`, processResults: (results) =&gt; ({ results }), } </code></pre> </answer> </body></html>

使用AJAX的Select2出现在模态后面

我在模态中使用 Select2，但它工作得不太正常，正如您在这里看到的：https://gyazo.com/a1f4eb91c7d6d8a3730bfb3ca610cde6 结果显示在模式后面。我怎样才能解决这个问题？我已经...

使用 templateSelection 设置额外数据

当我搜索时，它可以很好地处理所有文本 ID 和徽标，但现在我想添加默认数据，我可以使用选项添加文本和 ID，但不能添加徽标 那么我如何添加来自 ar 的额外数据...

如何在 Symfony 6 中安装 select2

我正在尝试使用 select2 多选框（药丸盒）重新填充表单字段。 我想使用 CDN 安装 select2： https://select2.org/getting-started/installation#using-select2-from-a-cdn

使用纯JS设置Select2值并触发事件

我正在使用油脂猴用户脚本来重新设计 UI 并在一些奇怪的网站上自动执行初始输入，该网站使用 jQuery 和 Select2。 我处理包含两个选择的行： 组织（选项有

无法读取未定义的“已禁用”属性

我有一个 Angular JS 应用程序。在此我有一个下拉菜单，我可以通过键入并按 Enter 键来创建新选项。但是，当我按 Enter 键时，我收到一些 JS 异常 我在这里...

Select2 - 打开下拉列表后形成下拉列表时需要一个事件

我正在使用 select2 jquery 插件 我正在使用开放事件 var select2 = $('select').select2(); select2.on("select2:打开", () => { // 我想用 $('.select2-results__opt...

在 Laravel Livewire 中使用 SELECT2 插件并具有远程搜索功能

我在 Laravel Livewire (v2.4.4) 中使用 SELECT2 (v4.0.13)。 我想使用 SELECT2 通过 Laravel Livewire 通过输入一些权限来获取远程数据，就像使用内置的 ajax 功能一样。但是...

在 select2 中预选值

Texbox 使用 Select2 动态填充远程调用以及如何设置预选值。这是代码 $("#e6").select2({ 占位符：“搜索...

如何从分组选项select2中删除重复标签？

我有 2 个带有重复标签的分组选项。 选择后，每个组中的标签会出现两次。 如何避免这种重复输入？ 我准备了一个 jsFiddle 来演示这个问题....