jquery-select2 相关问题

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

VueJS 3 组合中的Select2

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

回答 1 投票 0

select2 中每个选项的弹出窗口

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

laravel livewire 3 dom 重新渲染 select2 搜索消失了

我正在使用 Laravel Livewire 3 和相关选择选项,例如国家、州、城市,使用 Select 2 和选择选项上的搜索,选择国家/地区后 select2 搜索消失。 当我选择

回答 1 投票 0

导入Select2和Laravel Vite

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

回答 2 投票 0

更改选择2的高度

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

回答 1 投票 0

Laravel 多选与 Select2 Ajax

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

回答 1 投票 0

如何更改select2中的占位符?

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

回答 9 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

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

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

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

回答 0 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

Yii2 动态表单更新在 kartik-Select2 上失败

我正在使用 wbraganca 动态表单小部件。它对于“创建”操作效果很好。 让我感谢那些在 YouTube 上制作精彩教程视频的人! 我现在正在执行更新操作。我工作...

回答 1 投票 0

如何使 select2 只读而不禁用?

我用asp core编写了一个视图页面,并为我的组合框使用select2。当使用禁用此行代码时效果很好: $('select').prop("禁用", true); 但它禁用并且不是只读的。我想要

回答 1 投票 0

yii2 kartik 小部件中的 yii2-select2 匹配器

我正在使用 yii2-select2 kartik 小部件来搜索城市,但是搜索城市的效果很糟糕,因为首先它是在单词内部搜索,但我想先搜索后者。例如我把

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.