jquery-select2 相关问题

Livewire3 组件重新渲染后 Select2 消失

我有以下问题。 当我的 Livewire3 组件第一次渲染时，我选择的下拉列表将作为 select2 可用。但一旦我在 Livewire 组件中更改某些内容...

如何在yii2高级中使用select2，

当我在 yii2 表单中使用 select2 时，总是显示这样的错误： 无效配置 – yii ase\InvalidConfigException 您必须为 Bootstrap 3.x ve 安装 'yiisoft/yii2-bootstrap' 扩展...

点击select2时自动出现水平滚动条

我使用select2和bootstrap。每次我单击 select2 时，我的页面都会展开并出现水平滚动条。 如何解决这个问题呢： 这是我的 HTML 代码 我使用 select2 和 bootstrap。每次我单击 select2 时，我的页面都会展开并出现水平滚动条。 如何解决这个问题： 这是我的 HTML 代码 <div class="row"> <div class="col-md-12"> <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select> </div> </div> 这是我的JS代码 $(document).ready(function() { const url = "/ajax/categories"; $('#js-data-example-ajax').select2({ ajax: { url: url, dataType: 'json', data: function (params) { const query = { keyword: params.term, page: params.page || 1, limit: 10 } return query; } } }); }); 试试这个 body{overflow-x:hidden;} Bootstrap 5.2 对我的修复是将 position:relative 添加到包含的 col div。 Bootstrap 有一个类：position-relative <div class="row"> <div class="col-md-12 position-relative"> <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select> </div> </div> 通过删除或注释 select2.css 或 select2.min.css 中 CSS 代码的以下部分来修复此问题 .select2-container{ width: 100% !important; }

使用 AJAX 和 OptGroup 从第一个 Select2 上的选择中填充第二个 Select2

我有我的第一个 select2，我从远程 ajax 搜索中提取数据，并允许多个选项： $("#EmailSentToGroup").select2({ 阿贾克斯：{ url: "/行程搜索", ...

选择2动态更改项目

我有两个链接的选择：第一个选择的每个值决定哪些项目将显示在第二个选择中。 第二个选择的值存储在二维数组中...

Selenium 上无法根据 select 的文本选项定位元素的解决方案

我正在努力使用 PHP Selenium 创建自动单击，以便基于文本名称而不是值选项创建自动单击，因为该值是随机的。 超文本标记语言 我正在努力使用 PHP Selenium 创建自动点击，用于基于文本名称的 select2 下拉列表，而不是值选项，因为该值是随机的。 HTML <div class="input-group-prepend"> <select name="target" id="target" class="form-control select2-hidden-accessible" data-select2-id="select2-data-acctarget" tabindex="-1" aria-hidden="true"> <option value="" data-select2-id="select2-data-4-lu1l">-- Please Select --</option> <option value="hashrandom" data-select2-id="select2-data-5-i9za">Option1</option> </select> <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="select2-data-3-0a3d" style="width: 360.312px;"> <span class="selection"> <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-acctarget-container"> <span class="select2-selection__rendered" id="select2-acctarget-container" role="textbox" aria-readonly="true" title="-- Please Select --">-- Please Select --</span> <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span> </span> </span> <span class="dropdown-wrapper" aria-hidden="true"></span> </span> <button type="button" class="btn btn-link btn-sm" data-toggle="tooltip" data-placement="top" title="" data-original-title="tooltips_target"><i class="fa fa-question-circle"></i></button> </div> 代码 if(!$this->wait('#target','visibilityOfElementLocated',5,500)) return $this->sendError('form not found'); if($this->executeScript("$('#target').click();")); if(!$this->click('option[text=\'Option1\']')) return $this->sendError('select error.'); 但出现错误 NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"option[text='Option1']"} 根据 文档，有一个 WebDriverSelect 类可以与 SELECT HTML 元素一起使用。 代码看起来像这样 $selectElement = $driver->findElement(WebDriverBy::id('target')); $select = new WebDriverSelect($selectElement); $select->selectByVisibleText('Option1'); 或 $selectElement = $driver->findElement(WebDriverBy::id('target')); $select = new WebDriverSelect($selectElement); $select->selectByValue('hashrandom');

Select2 Bootstrap Modal 带模态滚动

更新： 我添加了这个： $("#id_project").select2({dropdownParent: $(".modal-body")}); ...这会导致下拉列表正确放置，并且可以输入搜索内容。

动态添加Select 2，Jquery Validations不起作用

我正在开发一个表单，供用户将多个商品添加到购物车，并且需要验证没有任何字段留空。我正在利用 Select2 插件、Jquery Validator 和 jQuery...

地图全屏时不显示 select2

嘿，我试图在谷歌地图上显示 select2（其后端），并且有效，但是当地图全屏时，列表不会显示。我尝试更改 z-index 值，但不起作用。 .

Select2 导致全页面刷新而不是部分回发

我在 DropDownList 上使用 Select2，当我选择一个使整个页面刷新的值时。 在没有 Select2 的情况下直接选择并进行部分回发是不会发生这种情况的。 DropDownList 有

Select2 多选重复值

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>'); });

动态形式使用select2时的问题

我正在以一种形式同时使用扩展dynamicform和select2： wbraganca\dynamicform\DynamicFormWidget 卡蒂克\选择2\选择2 一开始它工作得很好，但是当添加另一个字段时，它只是......

“未为 Select2 定义查询函数未定义错误”

尝试使用 Select2 并在多个项目输入/文本字段上收到此错误： “未为 Select2 定义查询函数未定义错误”

使用 jQuery 显示/隐藏 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 库从选项列表中搜索特定选项。我正在使用...

VueJS 3 组合中的Select2

如何在组合VueJs3中创建select2组件？ 我正在学习新的 VueJS 3，当我想创建 select2 组件时，出现错误，请帮助我修复它。我已经尝试过

select2 中每个选项的弹出窗口

我尝试将鼠标悬停在 select2 中的每个选项上并返回相应的弹出窗口。例如，当我将鼠标悬停在“低努力”上时，它会返回以下内容： 标题流行1 文本弹出1 当我将鼠标悬停在...

使用 Kartik Select2 根据第一个下拉选项设置第二个下拉选项

我有一个使用 yii2 框架的应用程序。我正在尝试使用选择选项（下拉选择），并且我使用 Kartik Select2。 这是我选择选项的视图： 在上面的图片中你可以看到我有两个选择

select2 的可访问级别是多少？我可以获得 select2 的 VPAT 文档吗？

最近我的公司要求获取我们正在使用的所有第三方内容的可访问性状态。我可以在 github 上看到有关 select2 库中可访问性的活动和已关闭问题，但 select2 是为了...

Select2 插件不适用于页面加载后创建的 html

我在点击时附加 html（选择下拉列表）。但 select2 仅在页面加载时获得任何选择下拉菜单时才有效。 如果使用 jquery 单击页面加载后创建选择下拉列表，则 select2 将不会'...