jquery-select2 相关问题

Select2是基于jQuery的选择框的替代品。它支持搜索，远程数据集和无限滚动结果。

我正在尝试在我的 Laravel 10 项目中使用 select2，该项目正在使用 Vite。我不断收到错误消息未捕获的类型错误：$(...).select2 不是函数我的问题：正确的方法是什么...

import jquery-select2 vite

回答 2 投票 0

我正在尝试更改包含箭头和所选选项的框的高度。我正在使用 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>   <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>   <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>

html jquery css jquery-select2

回答 1 投票 0

Laravel 多选与 Select2 Ajax

我在帖子和标签之间实现了多对多关系。我使用 Select2 Ajax 进行多选，并且 html 由 Spatie/HTML 包呈现。在创建表单中，我可以选择标签并...

laravel many-to-many jquery-select2

回答 1 投票 0

如何更改select2中的占位符？

如何使用 select2 更改数据占位符？到目前为止我已经尝试过了。 $("#city").select2({占位符:"foo"}); 和这个... $("#city").attr("数据占位符","bar"); 但两者都不起作用。

javascript jquery jquery-select2

回答 9 投票 0

使用 Laravel/Vuexy/Select2 进行多选时的布局问题

我在项目中使用 Laravel + Vuexy + Select2 进行多重选择时遇到布局问题。我严格按照文档进行操作，但布局并未按预期显示...

laravel jquery-select2

回答 1 投票 0

选择2个kartik数值更改为索引值

我有这样的数据：我使用这些数据来填充 select2 kartik 组合框，这是我的 yii2 代码，回声 \kartik\widgets\Select2::widget([ '属性' => '

php yii2 jquery-select2 yii2-model

回答 3 投票 0

数据表行中的两个 Select2，第二个在没有结果时显示“添加”按钮，但第一个不显示

我有一个数据表，每行包含两个 select2 用于自动完成产品和计量单位。此功能工作正常，但如果未找到结果，每个 select2 必须显示添加 b...

datatables jquery-select2

回答 1 投票 0

select2 4.0 和引导工具提示

有人使用 select2 4.0 使用 bootstrap 3.x 工具提示吗？我无法再在 select2 4.0 中显示工具提示（在 3.5.2 中运行良好）。这是 HTML 代码：有人使用 bootstrap 3.x 工具提示获得 select2 4.0 吗？我无法再在 select2 4.0 中显示工具提示（在 3.5.2 中运行良好）。这是 HTML 代码： <select name="xxx" class="select-full tip" title="some_title"> 这是 JavaScript： $('.tip').tooltip({placement: "auto", html: true}); $(".select-full").select2({ width: "100%", }); 但是，select2 元素中不会显示任何工具提示（在“正常”选择中工作正常）。我在这个网站上找到了一些解决方案，但它们只适用于旧的 select2。检查了近3天的代码后，我发现问题是最有可能是由select2附带的CSS文件中的这一行引起的： .select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} 如果我删除这一行，工具提示可以正常工作，但 select2 元素看起来不太好（显示两个选择而不是一个）。我还找到了部分解决方案。添加这个额外的代码片段可以解决问题，但只有在 JavaScript 本身定义了 title 时它才有效（如果从 JS 代码中删除“title”元素则不起作用）： $(".select2-container").tooltip({ title: "some static title"}); 添加了实时示例 - https://jsfiddle.net/8odneso7/ 使用引导文档和一些开发工具，我找到了解决方案。需要在 select2 容器上创建工具提示，因为原始标签被 select2 隐藏了。原始标题属性被重新使用，您可以根据需要在服务器上渲染它。 $(".select2-container").tooltip({ title: function() { return $(this).prev().attr("title"); }, placement: "auto" }); 工作示例：https://jsfiddle.net/8odneso7/2/ 需要放置“auto”，因为顶部的选择和正文之间没有填充/边距，至少在 jsfiddle 中没有。如果您想删除选项上的工具提示： $(".select2-selection span").attr('title', ''); 在 Bootstrap 5.2.3 和 Select2 4.0.13 中，对早期答案的以下修改通过使用父元素的委托解决了必须等待 Select2 完全初始化的问题： $('#entrySelector').select2({ ... }) .parent().tooltip({ selector: '.select2-container', trigger : 'hover', title: function() { return $(this).prev().attr('title'); } });

jquery css twitter-bootstrap jquery-select2

回答 0 投票 0

从 WooCommerce Checkout Country 字段重新排序国家/地区，保持状态同步

问题我正在通过对 billing_country 和 Shipping_country 下拉字段中的国家/地区重新排序来自定义 WooCommerce 结账页面。我通过使用

javascript php wordpress woocommerce jquery-select2

回答 1 投票 0

自定义国家/地区下拉列表后国家/地区发生更改时如何更新 WooCommerce 结账州/省字段？

问题我正在通过对 billing_country 和 Shipping_country 下拉字段中的国家/地区重新排序来自定义 WooCommerce 结账页面。我通过使用

javascript php wordpress woocommerce jquery-select2

回答 1 投票 0

在 yii2 中实现多选下拉菜单时出现完整性约束违规错误

我正在尝试使用“cornernote/yii2-linkall”和“kartik-v/yii2-widget-select2”来实现多选下拉菜单。我已遵循本指南，它适用于单个多选下拉菜单，...