Select2是基于jQuery的选择框的替代品。它支持搜索，远程数据集和无限滚动结果。
更新： 我添加了这个： $("#id_project").select2({dropdownParent: $(".modal-body")}); ...这会导致下拉列表正确放置，并且可以输入搜索内容。
动态添加Select 2，Jquery Validations不起作用
我正在开发一个表单，供用户将多个商品添加到购物车，并且需要验证没有任何字段留空。我正在利用 Select2 插件、Jquery Validator 和 jQuery...
嘿，我试图在谷歌地图上显示 select2（其后端），并且有效，但是当地图全屏时，列表不会显示。我尝试更改 z-index 值，但不起作用。 .
我在 DropDownList 上使用 Select2，当我选择一个使整个页面刷新的值时。 在没有 Select2 的情况下直接选择并进行部分回发是不会发生这种情况的。 DropDownList 有
http://jsfiddle.net/tXFbk/2/ HTML： 一些ID http://jsfiddle.net/tXFbk/2/ HTML： <div class="control-group"> <label for="some_id" class="control-label">Some ID</label> <div class="controls"> <input type="text" id="some_id" name="some_id" class="span4"/> </div> </div> JS： $(function() { $('#some_id').select2({ allowClear: true, placeholder: 'Some ID', minimumInputLength: 2, multiple: true, data: [ {id: 1, text: 'some text'}, {id: 2, text: 'some other text'}, {id: 3, text: 'some more text'} ] }); $('#some_id').select2('data', [ {'id':1,'text':'some text'} ]); console.log($('#some_id').select2('val')); }); 首次加载时，它会重复值，清除值后，它不会从输入中清除它。此外，如果您添加一个项目（例如“更多文本”）然后将其删除，它不会从输入值中清除它。有什么办法让它停止重复值吗？ 还有一件事 - 如何禁用添加已添加的项目？ Select2 4.0.0 支持重复标签。 Jsfiddle 演示链接 $eventSelect.on("select2:select", function (e) { log("select2:select", e); $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>'); }); $eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); e.params.data.element.remove(); }); function formatResultData (data) { if (!data.id) return data.text; if (data.element.selected) return return data.text; }; 基于 select2 事件和 github issues 图片： 检查以下On Selecting事件，并在createSearchChoice中设置isNew属性 如果解决了您的问题请告诉我 $('#some_id').select2({ tags: true, tokenSeparators: [","], createSearchChoice: function (term, data) { if (term.trim().length > 0) { if ($(data).filter(function () { return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0; }).length === 0) { return { id: term, text: term, isNew: true // this is necessary to check if the item is newly added or not }; } } }, multiple: true, minimumInputLength: 1, allowClear: true, data: [ {id: 1, text: 'some text'}, {id: 2, text: 'some other text'}, {id: 3, text: 'some more text'} ], }).on("select2-selecting", function (e) { var tagId = ''; if (e.choice.isNew) { self.AddTagToDatabase(e.choice.text); } else { var isValidTag = true; $(config.element[0] + ' ul li').find('div').each(function (index, item) { if ($(item).html().toLowerCase().trim() == e.choice.text.toLowerCase().trim()) { isValidTag = false; e.choice.text = ''; return; } }); } }) 需要触发select2的change事件来反映变化。 $("#dropdownId").val("yourValues").trigger("change"); 设置值后，您需要手动触发触发器值，以反映下拉列表中所做的最新更改 根据 NSDont 的上述回答，为了解决重新排序问题，我们可以在每次选择事件后重新排列选项，即： $eventSelect.on("select2:select", function (e) { log("select2:select", e); //rearrange options here: $eventSelect.find('option').each(function () { if (!this.selected){ $(this).appendTo($eventSelect); } }); //end rearrange $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>'); });
我正在以一种形式同时使用扩展dynamicform和select2： wbraganca\dynamicform\DynamicFormWidget 卡蒂克\选择2\选择2 一开始它工作得很好，但是当添加另一个字段时，它只是......
尝试使用 Select2 并在多个项目输入/文本字段上收到此错误： “未为 Select2 定义查询函数未定义错误”
我发现显示 select2 选项来加载类别或产品有问题，我用每种方法进行了测试，但它不起作用。甚至 stackoverflow 中的选项。 我发现显示 select2 选项来加载类别或产品有问题，我用每种方法进行了测试，但它不起作用。甚至 stackoverflow 中的选项。 <!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>0</title> <link href="../assets/cdn/select2.min.css" rel="stylesheet" /> <script src="../assets/cdn/jq.js"></script> <script src="../assets/cdn/select2.min.js"></script> <link href="../assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" /> <link href="../assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/style.css" rel="stylesheet" type="text/css" /> <style> .hidden { display: none; } .visible { display: block; } </style> <script> $(document).on('change', '#cat', function() { $('#catlist').removeClass('hidden').addClass('visible'); $('#prolist').removeClass('visible').addClass('hidden'); }); $(document).on('change', '#pro', function() { $('#prolist').removeClass('hidden').addClass('visible'); $('#catlist').removeClass('visible').addClass('hidden'); }); $(document).ready(function() { $('#catlist').select2(); $('#prolist').select2(); $.ajax({ url: '../content/ajax/getcat.php', type: 'GET', dataType: 'json', success: function(data) { $.each(data, function(index, item) { $('#catlist').append('<option value="' + item.id + '">' + item.faname + '</option>'); }); $('#cat').click(); } }); $.ajax({ url: '../content/ajax/getpro.php', type: 'GET', dataType: 'json', success: function(data) { $.each(data, function(index, item) { $('#prolist').append('<option value="' + item.id + '">' + item.faname + '</option>'); }); } }); }); </script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6 offset-sm-3"> <div class="row p-4"> <label class="mb-3">Pro or Category</label> <div class="col-6"> <div class="form-check form-check-custom"> <input class="form-check-input" checked name="procat" type="radio" value="" id="cat" /> <label class="form-check-label" for="cat">category</label> </div> </div> <div class="col-6"> <div class="form-check form-check-custom"> <input class="form-check-input" name="procat" type="radio" value="" id="pro" /> <label class="form-check-label" for="pro">products</label> </div> </div> </div> <select class="form-select mb-3 hidden" id="catlist" data-control="select2" data-close-on-select="false" data-placeholder="select cats" data-allow-clear="true" multiple="multiple"> </select> <select class="form-select mb-3 hidden" id="prolist" data-control="select2" data-close-on-select="false" data-placeholder="select products" data-allow-clear="true" multiple="multiple "> </select> </div> </div> </div> </body> </html> 我通过使用人工智能和stackoverflow中的重复问题还没有得出结果。 我赢了 <style> .hidden { display: none !important; } .visible { display: block !important; } </style> <script> $(document).ready(function() { function toggleContent() { if ($('#cat').is(':checked')) { $('#catlist').removeClass('hidden').addClass('visible'); $('#prolist').removeClass('visible').addClass('hidden'); $('#catlist').select2(); $('#prolist').select2('destroy'); } else if ($('#pro').is(':checked')) { $('#prolist').removeClass('hidden').addClass('visible'); $('#catlist').removeClass('visible').addClass('hidden'); $('#prolist').select2(); $('#catlist').select2('destroy'); } } $('input[name="procat"]').change(function() { toggleContent(); }); $.ajax({ url: '../content/ajax/getcat.php', type: 'GET', dataType: 'json', success: function(data) { $('#catlist').empty(); $.each(data, function(index, item) { $('#catlist').append('<option value="' + item.id + '">' + item.faname + '</option>'); }); toggleContent(); } }); $.ajax({ url: '../content/ajax/getpro.php', type: 'GET', dataType: 'json', success: function(data) { $('#prolist').empty(); $.each(data, function(index, item) { $('#prolist').append('<option value="' + item.id + '">' + item.faname + '</option>'); }); toggleContent(); } }); toggleContent(); }); </script>
使用 Select2 库时，为什么 Bootstrap 表单验证不能在选择字段内工作？
我有下面的表单，并且我在选择输入字段内使用 Bootstrap 表单验证。我还使用 Select2 库从选项列表中搜索特定选项。我正在使用...
如何在组合VueJs3中创建select2组件？ 我正在学习新的 VueJS 3，当我想创建 select2 组件时，出现错误，请帮助我修复它。我已经尝试过
我尝试将鼠标悬停在 select2 中的每个选项上并返回相应的弹出窗口。例如，当我将鼠标悬停在“低努力”上时，它会返回以下内容： 标题流行1 文本弹出1 当我将鼠标悬停在...
使用 Kartik Select2 根据第一个下拉选项设置第二个下拉选项
我有一个使用 yii2 框架的应用程序。我正在尝试使用选择选项（下拉选择），并且我使用 Kartik Select2。 这是我选择选项的视图： 在上面的图片中你可以看到我有两个选择
select2 的可访问级别是多少？我可以获得 select2 的 VPAT 文档吗？
最近我的公司要求获取我们正在使用的所有第三方内容的可访问性状态。我可以在 github 上看到有关 select2 库中可访问性的活动和已关闭问题，但 select2 是为了...
我在点击时附加 html（选择下拉列表）。但 select2 仅在页面加载时获得任何选择下拉菜单时才有效。 如果使用 jquery 单击页面加载后创建选择下拉列表，则 select2 将不会'...
laravel livewire 3 dom 重新渲染 select2 搜索消失了
我正在使用 Laravel Livewire 3 和相关选择选项，例如国家、州、城市，使用 Select 2 和选择选项上的搜索，选择国家/地区后 select2 搜索消失。 当我选择
我正在尝试在我的 Laravel 10 项目中使用 select2，该项目正在使用 Vite。我不断收到错误消息 未捕获的类型错误：$(...).select2 不是函数 我的问题： 正确的方法是什么...
我正在尝试更改包含箭头和所选选项的框的高度。我正在使用 select2，但我对此不太了解。这是我的代码： HTML： 我正在尝试更改包含箭头和所选选项的框的高度。我正在使用 select2，但我对此不太了解。这是我的代码： HTML： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <select class="form-select" id="searchSelect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="script.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> </body> </html> CSS： body{ padding: 25px; } #select2-searchSelect-container { height: 50px; //This didn't work } JavaScript： $( document ).ready(function() { $("#searchSelect").select2(); }); 我尝试为 .select2-containter、.selection、.select2-selection、.select2-selection--single 添加高度，但都没有成功。 感谢您的帮助！ 我尝试为 .select2-containter、.selection、.select2-selection、.select2-selection--single 添加高度，但都没有成功。 我不太确定你想要什么，但看起来你只是选择了错误的元素。从我看来，选择器应该类似于 .select2-container .select2-selection.select2-selection--single。特异性可能是另一个问题，在任何情况下，您可能选择了正确的元素，但另一种样式覆盖了您自己的元素。 $( document ).ready(function() { $("#searchSelect").select2(); }); body{ padding: 25px; } .select2-container .select2-selection.select2-selection--single { height: 50px; //Try this } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <select class="form-select" id="searchSelect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="script.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> </body> </html>
我在帖子和标签之间实现了多对多关系。我使用 Select2 Ajax 进行多选，并且 html 由 Spatie/HTML 包呈现。 在创建表单中，我可以选择标签并...
如何使用 select2 更改数据占位符？ 到目前为止我已经尝试过了。 $("#city").select2({占位符:"foo"}); 和这个... $("#city").attr("数据占位符","bar"); 但两者都不起作用。
使用 Laravel/Vuexy/Select2 进行多选时的布局问题
我在项目中使用 Laravel + Vuexy + Select2 进行多重选择时遇到布局问题。我严格按照文档进行操作，但布局并未按预期显示...