jquery-select2-4 相关问题

问题是如何在选项的一部分上应用样式。我有一个像这样的选择：项目 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 <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> 现在浏览器将每个选项的全部内容视为文本。这是 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 (/>/g,'>').replace (/</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>

jquery-select2 jquery-select2-4

回答 0 投票 0

选择2向上打开下拉-dropup

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

jquery jquery-select2-4 jquery-select2

回答 1 投票 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

livewire 3 和 laravel 使用 select 2 window.livewire.on('data-change-event',()=>{ 表达式语句不是赋值或调用

我正在尝试在 laravel 10 中将 select2 与 livewire 3 一起使用。但是当我尝试在 resources/views/layouts/app.blade.php 中编写脚本时，它显示以下错误， “()=> 表达式

laravel laravel-livewire jquery-select2-4

回答 1 投票 0

select2 多组选择。选择父节点，禁用子节点。取消选择父节点，启用子节点

我用 select2 实现了 2 个自定义函数：选择父节点，将父节点添加到选定的节点并禁用子节点。取消选择父节点，从选定的节点中删除并启用子节点。这...

javascript jquery jquery-select2-4

回答 1 投票 0

未找到结果时清除 Select2 搜索输入

我正在使用 jQuery Select2 版本 4.0.13。我想在显示“未找到结果”时自动清除搜索文本框。类似于下拉选项的重置。目前我使用扫描条形码...