jquery-select2 相关问题

我想在下拉列表中显示没有值的选项，但选择 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 html jquery-select2

回答 0 投票 0

如何使用 jquery 选择器通过 {{ $item->id }} 选择 Bootstrap Modal

我注意到当 select2 处于模态时，搜索输入不可聚焦，向上和向下键也不起作用。 jQuery：3.6.1 选择2：4.1.0 我想使用 jquery 选择器来查找...

javascript jquery laravel bootstrap-modal jquery-select2

回答 1 投票 0

Select2 从输入字段而不是下拉菜单开始

我使用js库select2。这是我现在拥有的屏幕截图：开始：点击下拉菜单：现在是否可以从一个输入字段开始，而不是直接使用下拉列表？我知道我...

javascript jquery drop-down-menu input jquery-select2

回答 12 投票 0

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%; } 这对我有用

jquery css select jquery-select2

回答 0 投票 0

选择2向上打开下拉-dropup

我想每次都向上显示下拉列表，无论下面有足够的空间。如何实现？做到这一点的关键点是什么？更新以下是我初始化 Select2 的方法： $("选择[...

jquery jquery-select2-4 jquery-select2

回答 1 投票 0

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

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

javascript c# asp.net asp.net-mvc jquery-select2

回答 3 投票 0

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

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

javascript html jquery-select2

回答 1 投票 0

Select2 不显示选项

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

javascript jquery ajax asp.net-mvc jquery-select2

回答 3 投票 0

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

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

jquery jquery-select2 razor-pages jquery-select2-4

回答 1 投票 0

将select2 ajax结果显示到模板中

我有 select2 在进行 ajax 调用后显示数据。 $(文档).ready(函数() { $("#citySelect").select2({ 主题：'bootstrap-5'， ...</desc> <question vote="0"> <p>我有 select2 在进行 ajax 调用后显示数据。</p> <pre><code> <script> $(document).ready(function () { $("#citySelect").select2({ theme: 'bootstrap-5', placeholder: "Search for your city", dropdownAutoWidth: true, width: 'auto', minimumInputLength: 3, allowClear: true, async: true, ajax: { url: function (params) { return '@GatewaySettings.Value.Url' + '/api/location/cities/' + params.term; }, contentType: "application/json; charset=utf-8", type: 'GET', processResults: function (result) { return { results: $.map(result, function (item) { return { id: item.id, text: item.city }; }), }; } } }); }); </script> </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> <script> $(document).ready(function () { $("#citySelect").select2({ theme: 'bootstrap-5', placeholder: "Search for your city", dropdownAutoWidth: true, width: 'auto', minimumInputLength: 3, allowClear: true, async: true, templateResult: function (item) { console.log(item); return item.city + ', ' + item.state + ' ' + item.zip; }, templateSelection: function (item) { return item.city }, ajax: { url: function (params) { return '@GatewaySettings.Value.Url' + '/api/location/cities/' + params.term; }, contentType: "application/json; charset=utf-8", type: 'GET', cache: true, processResults: function (result) { return { results: $.map(result, function (item) { return { id: item.id, text: item.city }; }), }; } } }); }); </script> </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 }) => "@GatewaySettings.Value.Url" + `/api/location/cities/${encodeURIComponent(term)}`, processResults: (results) => ({ results }), } </code></pre> </answer> </body></html>

jquery jquery-select2 jquery-select2-4

回答 0 投票 0

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

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

javascript jquery ajax jquery-select2

回答 5 投票 0

使用 templateSelection 设置额外数据

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

javascript jquery-select2

回答 1 投票 0

jquery-select2 相关问题

最新问题