Popover中的Select2删除元素
是指在一个弹出窗口（Popover）中使用Select2插件来删除元素的操作。
Select2是一个基于jQuery的下拉框插件，它提供了更好的用户体验和功能扩展。Popover是一个轻量级的弹出窗口插件，可以在网页中显示临时内容。
当使用Select2插件在Popover中展示一些选项列表时，有时需要允许用户删除已选择的元素。删除元素的操作可以通过以下步骤完成：
- 在Popover中展示Select2插件，并加载需要展示的选项列表。
- 当用户选择一个或多个元素时，将这些选项添加到Select2的选择列表中。
- 提供一个删除按钮或图标，以便用户可以删除已选择的元素。
- 当用户点击删除按钮时，从Select2的选择列表中移除相应的选项。
- 更新Select2插件，以反映删除操作的结果。
Popover中的Select2删除元素的优势是可以方便地在弹出窗口中进行选项删除操作，提高了用户的操作效率和体验。
这种功能可以应用于各种场景，例如：
- 在一个表单中，当用户选择了错误的选项时，可以通过Popover中的Select2删除元素来快速更正选择。
- 在一个用户配置界面中，当用户需要删除某个已选择的配置项时，可以使用Popover中的Select2删除元素来实现。
- 在一个编辑界面中，当用户需要删除已经添加的标签或标记时，可以利用Popover中的Select2删除元素来完成删除操作。
推荐使用腾讯云相关产品中的下拉框组件来实现Popover中的Select2删除元素功能，例如腾讯云开发者平台提供的"下拉框组件"（https://cloud.tencent.com/product/ui-components）可以满足这一需求。
相关·内容
我已经实现了一个很好的方法来使用Bootstrap 3的Popover来显示验证错误消息，而且在大多数情况下，它工作得很好--除非涉及到隐藏或替换的元素，比如Select2或CKEditor。弹出器在常规元素(如输入和常规选择)上正确定位，而不是由Select2增强的select。
我创建了一个Fiddle，Sparky修复了它，所以它实际上是工作的：
$("#noticeSentTo").select2();
var validator = $("#documentAdmin").validate({
debug: true,
浏览 2提问于2015-05-06得票数 1
回答已采纳
我正在尝试将select2下拉列表放置在我的弹出窗口中--当我第一次打开弹出窗口时，select2下拉列表通常是呈现的，但是如果我关闭它并再次打开它，它会呈现两个select2下拉列表，其中一个是不可点击的：
我已经尝试过来自的解决方案和来自的解决方案，但是它们都没有工作。我还读到过select2在Bootstrap模式下不能正常工作，并且尝试用dropdownParent属性呈现它--也不起作用。
My：
<div class="actions-row mb-5">
<button type="button" class=&#
浏览 6提问于2020-05-21得票数 1
我有一个RequireJS安装程序来加载 jQuery插件。
但是，我有一个问题，这意味着在页面加载时，浏览器默认的select输入会显示几秒钟，然后替换为高级Select2输入，大概是在RequireJS异步加载脚本时。
有什么方法可以避免这种情况，而不必将脚本包含在HTML中？
这是我的RequireJS设置：
require.config({
baseUrl: '/assets/js',
paths: {
jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
浏览 3提问于2014-10-30得票数 0
回答已采纳
3回答
首先，我是jQuery的新手。
当一个" select“元素通过popover引导程序调用时，我遇到了问题。我已经尝试过任何可能的解决方案: div标记中的select元素，等等，但是都没有效果。
这是我的小提琴。
var test2 = $('#optionDropdown2');
var test = $('#popoverContent select.optionDropdown'); //I have no idea here
$(test2).select2();
$(test).select2();
$(test
浏览 1提问于2013-07-24得票数 0
回答已采纳
1回答
选择2和引导弹出
、、、、
我试图在select2 4.0.1上设置一个引导3.5popover，但它似乎不起作用：
<input id="sampleInput" type="text" rel="popover" data-content="This is the body of Popover" data-original-title="Creativity Tuts" data-placement="auto" data-trigger="hover" />
<p/>
<s
浏览 3提问于2015-11-18得票数 0
回答已采纳
1回答
我想知道如何让我的Select2下拉菜单在Bootstrap弹出窗口中工作。我知道问题是popover内容是在popover-event-click启动后加载的，所以Select2的JS代码无法工作。我只是不知道该怎么解决它。
示例：
尝试在名为"Aaaah!“的第四个问题上按"submit”。你就可以看到弹出画面了。然后尝试按下"Alabama"-dropdown (这是Select2下拉菜单)，它不会工作(因为JS不会启动，因为弹出内容是在DOM之后加载的)。
有人知道怎么让它工作吗？
浏览 4提问于2014-03-03得票数 1
1回答
我有一个table一行，包含大约30 td，对于每一个td，我打开一个弹出窗口，在那里我将显示我的表单，因为我想显示它们为哪个td输入值，所以我选择使用引导弹出，
我将select2用于弹出窗体上的所有select字段。像这样，
$(".select2").select2({
width: '100%',
});
但这似乎行不通。select2会被应用，但是option根本不会打开。
我也像这样重新初始化了select2，
$('body').on('shown.bs.popover', function (e)
浏览 0提问于2018-02-01得票数 2
代码说明了一切。
我知道ngIf将从DOM中删除或克隆元素，但我不明白为什么popover指令会受到影响(popover- is -open)。
Plunker：
<div>
<input type="text"
uib-popover="This one will appear"
popover-placement="right"
popover-is-open={{true}}
/>
</div>
<div ng-if="t
浏览 4提问于2016-09-23得票数 0
我正在使用Bootstrap中的popover，我得到了以下错误：
BootstrapVue警告: popover -无法在文档中找到目标元素。
一切都很好，但我有很多警告，我想修复它们。
父组件
<template>
<popover />
<label id="popover-target-EXAMPLE">
<i class="far fa-question-circle"></i> Parish
</label>
</t
浏览 3提问于2020-02-27得票数 4
回答已采纳
这是我之前问过的一个问题的延续：
虽然Select2的问题已经解决，但CKEditor的问题从来没有解决，而当我求助于另一种解决方案时，我更倾向于使用弹出框，因为它们在触发时不会改变文档布局。
下面是我当前问题的一部分：
我知道这与if语句中的选择器链接有关--我输入了一些控制台输出，以确保它触发了CKEditor元素的弹出：
if (element.is(':hidden')) {
$(element).siblings().next().popover('show').parents('.form-group'
浏览 0提问于2016-03-14得票数 0
回答已采纳
1回答
如何在反应中使用泛型
、、、
我正在修复一个旧的React应用程序中的一些bug。里面没有打字稿。
要使用Select2组件(Blueprintjs库)，我必须将其转换为非泛型引用。
在打字稿中，可以用const FilmSelect = Select2.ofType<Films.Film>();实现。
我的尝试是：Select2.ofType<PropTypes.array>()没有成功。
如果只使用Javascript (没有类型记录)，我如何实现相同的结果？
下面是一个使用类型记录的示例。
import { Button } from "@blueprintjs/core";
浏览 16提问于2022-07-29得票数 0
2回答
我正在使用和。当我单击.append-new-skills类时，它应该克隆div的、滑块并选择下拉列表。
它确实克隆了所有这些元素，但不幸的是，它们在任何时候都是不可点击或功能的，只是视觉上的存在。
我理解HTML标记必须是唯一的，但不能确定合并所有这些元素的最佳方法。
我的问题是:在初始页面加载后加载到DOM中时，如何使每个新添加的元素发挥作用？
初始化<head></head>标记中的Select下拉列表：
$(".select-some-skills").select2({
placeholder: "+ Add T
浏览 3提问于2014-04-07得票数 0
回答已采纳
1回答
我正在使用引导和引导验证器。我在popover中添加了错误，但是当我在输入中添加标题时，它会出现在popover中。
我需要没有标题的弹出式，但我想添加标题到输入。
<input title="Your name"
placeholder="Name"
data-toggle="popover"
class="form-control"
type="text" required>
上的完整代码
浏览 5提问于2016-02-21得票数 0
回答已采纳
如何动态更新弹出内容？ 嗨，我正在尝试建立一个静态网站上的搜索栏，产生一个弹出式列表的数据。搜索栏应该过滤掉数据列表，然后更新html代码并将其发送到popover函数。下面是我的CodePen代码的演示 https://codepen.io/phat-xluong/pen/YzqLWwz 以下是我的问题:搜索会过滤数据列表。更新数据列表，但不将html内容传送到弹出框。 JS代码 //POPOEVER PART 1 - CODE TO HANDLE SEARCH/FILTER FUNCTION FOR POPOVER CONTENT ON SEARCH BAR
// INITIATE F
浏览 96提问于2020-09-12得票数 1
我无法在表的td元素中显示我的ngbPopover。我看到了很多问题，但是没有明确的解决方案，关于如何在我的Angular 5应用程序中实现这一点。
我可以看到我返回popover文本的方法被调用了，但是popover从来没有出现过。
浏览 0提问于2018-04-10得票数 0
如何检测我的变量值是否存在于select2中的某个选项中？例如，一旦select2打开，如果该选项确实存在，我希望从选择中删除该选项。
到目前为止，我只有一个条件来检测select2是否打开，那么如何检查我的var是否存在于选项中呢？
var myvariable = $('form#myform #toremove').val();
$('form#myform .select2').on('select2:open', function(e){
//this part is wrong
$('form#myform .se
浏览 14提问于2016-09-21得票数 0
回答已采纳
我需要捕获页面其他地方的对象的事件(如单击)，而不是select2对象的子对象，而select2对象具有焦点并显示结果。当select2结果对象聚焦时，我不能单击页面其他地方的按钮/锚，让它执行其操作。它只是关闭了select2对象。
有办法这样做吗？下面是一个演示，展示了这种行为：
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
浏览 3提问于2015-01-22得票数 3
回答已采纳
我有一个select2列表和一组外部按钮。我想单击外部按钮并在select2列表中取消选择相应的项。我知道我可以使用以下命令从外部值中选择项
$("#external_btn").click(function() {
$("#select2").val("CA").trigger("change");
});
因此，当我单击"external_btn“按钮时，select2上的"ca”项将被选中。
但是我怎样才能取消选择项目呢？谢谢。
浏览 0提问于2014-03-04得票数 10
使用此指令向元素添加一些popover属性。问题是过度使用$compile，这会导致浏览器不再响应或最大内存使用率错误。我在一页上大约50个元素上使用了这个指令。
问题
如何提高我的指令的性能？有没有其他方法来处理我的指令中的属性的创建和操作？
Html
<span trim-to-tooltip="transaction.devicehash"></span>
指令
angular.module('app.xxx').directive('trimToTooltip', [
'$timeout',
浏览 1提问于2016-01-22得票数 1
我很难弄清楚这件事。我已经实现了一个popover组件，当用户将鼠标悬停在'i‘图标上时，应该打开一个popover，当用户离开该图标时，它应该关闭popover。我认为发生的情况是，当鼠标悬停在图标上时，open和close方法不断被调用，因此它看起来就像从未被打开过一样。
我的组件：
export const InfoIconWrapper = styled(InfoIcon)(({ theme }) => ({
color: fade(theme.palette.black, 0.3),
}));
export const GridWrapper = styled(G
浏览 26提问于2019-11-15得票数 0
回答已采纳
1回答
我无法为select2 v4.0.1实例设置初始值；正在用标记: true创建select。
HTML：
<select id="tags" name="tags" class="form-control" multiple></select>
联署材料：
$('#tags').select2({'tags': true});
试过：
<select id="tags" name="tags" class="form-control" m
浏览 3提问于2015-12-08得票数 1
我有3个爆米花，我希望每一个有一个不同的背景颜色。我是用引导和css做的。如果我将"A“放入跨度的”class=“中，则将”A“改为”蓝色“，或将"B”改为“B”改为“绿色”。
<div class="container">
<div>
<span
data-content="PopOver A"
data-placement="right"
data-trigger="hover"
浏览 2提问于2020-07-01得票数 1
回答已采纳
2回答
我一直试图改变波波夫身体的背景颜色，但它并没有改变颜色。如果我从样式中移除作用域，那么它可以工作，但是当我使用范围和深度选择器时，颜色就不适用了。
这是我的密码
<template>
<div>
<button
:id="callToAction"
>click me
</button>
<b-popover
:target="callToAction"
triggers="click blur"
浏览 6提问于2022-01-20得票数 1
2回答
我在select2文档中找不到一种方法来删除select2表单中的所有选项。旧的stckoverflow对这个问题的回答似乎不起作用，因为新版本(我使用的是4.0.3)有不同的行为
浏览 28提问于2017-06-27得票数 2
我有一个使用Select2 (4.0.3)和角(1.4.9)的项目。其中一个表单使用角度控制器和双向数据绑定，加载一个接触模型，其中包含多个站点，并从服务器加载可用站点列表。这些数据分别被添加到contact对象和sites数组中，后者是控制器的属性。我已经实现了一个Select2多重选择，它允许用户更新属于联系人的站点列表。
<select
name="sites"
class="form-control m-b js-example-basic-multiple site-select"
multiple="multi
浏览 2提问于2016-10-04得票数 0
回答已采纳
我正在使用Dart和Angularjs 2，我想使用select2视图，但它不工作，我的代码是：
html中的代码
<div class="form-group">
<label for="nivelEducativo" class="col-sm-2 control-label">Nivel Educativo</label>
<div class="col-sm-4">
<select class="select_profession form-control
浏览 1提问于2016-04-11得票数 0
一旦被清除，我想在它中挂起一个事件。select2与allowClear: true结合。然而这件事
$select.on('select2-removed', function(event) {
console.log(event);
});
使用清除按钮重置select2时不触发。
浏览 4提问于2014-07-03得票数 7
回答已采纳
2回答
我正在经历一个问题，我希望任何人都能澄清。我正在使用引导弹出触发登录表单。我想使用ajax验证用户和密码，但我无法使用preventDefault()和stopPropagation()阻止表单事件中的默认提交事件。
找到下面的代码，看看你能帮我一把，知道发生了什么。提前谢谢。
备注：
1) popover触发器是带有id="signin_popover_trigger“的元素，2) popover内容是class="signin_popover_content”中的html代码。
HTML代码：
<a href="javascript:void(0)"
浏览 4提问于2014-04-15得票数 2
我这样创建一个Select2：
function SetSelect(obj, placeholder, url) {
obj.select2({
placeholder: placeholder,
theme: "bootstrap",
language: "es",
ajax: {
url: url,
dataType: "json",
data: function (params) {
浏览 7提问于2017-06-29得票数 0
我对这个动态元素的委托是很新的。因此，今天，我再次测试了从堆栈中的某个示例中生成的动态模板，用于popover。
这是我的动态html内容。
<a id="testpop" class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popove
浏览 0提问于2016-10-15得票数 1
1回答
我有个清单是这样的：
<ul>
<li class="list">...</li>
<li class="list">...</li>
<li class="root">
<ul>
<li class="list">...</li>
<li class="list">...</li>
</ul>
</li>
浏览 0提问于2018-04-24得票数 0
回答已采纳
2回答
我正在使用一个主题，它的select2版本为3.4.3。我想获得移除的值ID，所以我尝试了：
$('#mymultiple').on("select2:removed", function (e) {
console.log(e.val);
})
但它没有检测到事件。然后，我测试了：
$('#mymultiple').on("select2:unselect", function (e) {
console.log(e.val);
})
但是它给了我一个未定义的值，尽管对象有一些信息：
$('#mymult
浏览 3提问于2016-09-07得票数 1
回答已采纳
我在单击事件之后生成了以下jquery clickno类。它是在单击事件之后生成的popover类。
$(".clickno").on('click', function(){$(this).parent().parent().parent().hide()})
因此，当我将它添加到脚本中时，它无法工作，因为在加载DOM时没有clickno类。如何在加载了popover之后调用此函数。
浏览 1提问于2013-10-05得票数 0
回答已采纳
我在静态元素上使用了一个非常有用的popover脚本：
$(".popover-class").popover({
title: fetchTitle,
content: 'loading...',
html: true,
placement: 'right'
}).on('shown.bs.popover', function () {
var popover = $(this).attr('data-content', f
浏览 6提问于2022-02-26得票数 1
我对Javascript知之甚少，但我有一个popover()函数，它可以在单击按钮时显示弹出文本。我只想弹出的文本自动淡入淡出，大约2秒后，按钮被点击。我设置了这段代码，它会在2秒后关闭实际的按钮，而不是弹出框。我想我需要以某种方式瞄准data-content元素，但是我不确定如何去做。您的帮助我们将不胜感激。
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
set
浏览 44提问于2018-07-11得票数 0
回答已采纳
问题陈述如下:我有一个具有复杂html布局的单页应用程序。
在这个布局中有一个锚标记(带有用户电子邮件的div)。
当用户点击那个锚时，应用程序就会显示弹出。
“Popover”被呈现为“body”。我不能渲染它的内部或附近锚，因为锚容器将削减爆米花，因为爆米花的大小比容器多。
所以问题是，当从DOM中删除锚元素时，删除/隐藏popover的最佳方法是什么(不是直接删除，而是通过移除其父元素之一)。
我看到两个选项-一个是setInterval，用于显示弹出以检查锚是否仍然存在。
另一种方法是在显示/隐藏popover时注册/取消一些回调，并在单页应用程序逻辑实现中发生变化时，调用它们以确保锚
浏览 2提问于2016-03-06得票数 0
回答已采纳
2回答
我正试图把一个自举弹出器放进另一个弹出器里。第一个弹出函数是正确的(打开并指定了HTML内容)，但第二个正确打开时似乎没有我设置的任何已启用设置( html :true、触发器：“手动”或html内容)。见下面的演示：
<div>
<a href="#" id="popover1" data-original-title="<b>testing</b>" data-placement="bottom">Click</a>
<div id="popover
浏览 6提问于2015-11-24得票数 1
回答已采纳
我有一个Select2下拉列表的问题，它阻止我添加到外部网站的链接到下拉列表中的选项。
我一直在关注几个指南，但是大多数都已经过时了，因为显然Select2的活动已经更新了。
我一直在尝试实现以下JS/JQ，但是我不确定我是否把它放在了正确的位置，甚至不确定它是否正确。
这样做的目的是将链接按钮添加到每个选项/元素的末尾，这将把用户带到外部站点。我更希望整个焦点/悬停区域是一个链接的按钮，但这似乎不可能与Select2？
function format(state) {
if (!state.id) return state.text; // optgroup
return state.tex
浏览 1提问于2015-08-05得票数 0
您好，我想删除或禁用我的第一个项目的select2当我的value(x) = 1。我该怎么做呢？谢谢。
var myData= [
{
id: "id1",
text: 'aaaaa'
}, {
id: "id2",
text: 'bbbbb'
}
];
var x=0;
if (x == '1') {
$('.select2 option[value="' + myD
浏览 2提问于2019-07-18得票数 0
我有5个不同的弹出窗口与不同的文本，但所有的都显示相同的文本。有什么帮助吗？谢谢。
<label class="radio span1">
<input type="radio" name="optionsRadios" value="option1">Level 1
<a href="#" rel="popover" data-toggle="popover" data-placement="top&#
浏览 0提问于2013-06-02得票数 2
回答已采纳
3回答
Im执行了以下弹出操作：
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
<button class="close">
x
</button>
<div>This is y
浏览 5提问于2017-07-30得票数 0
我需要在bootstrap的弹出窗口中保留用户的下拉选择，直到它被清除。我已经使"selected“属性可以根据选择的更改而动态更改，并使该更改替换了HTML select元素。我认为一切都在工作(我通过警报功能看到了它)。不幸的是，没有popover的“外观”，是的，当我检查它时，它与我在警觉中得到的不匹配。
这是我的小提琴。谢谢。
$(document).on('shown', "#btnPopover", function () {
$('select#optionDropdown').select2({
a
浏览 3提问于2013-07-27得票数 1
我使用Select2作为我的下拉列表.在更改一个值之后，我得到一个边框，时间为几毫秒。也许早些时候有人有这个问题？
改变后的Select2
浏览 0提问于2018-10-03得票数 0
回答已采纳
3回答
我对jquery不太熟悉。我做了一个弹出，但当我点击按钮，我设置了弹出，它带来了我在页面的顶部。我试图阻止默认事件，但它对我无效。我不知道我哪里错了。这是我的代码：
<script>
$(document).ready(function(e) {
$('[data-toggle="popover"]').popover();
e.preventDefault();
});
</script>
它只是几行，所以想把它写到html文件中。当我点击那个按钮时，我能做些什么才能让它留下来？
这是我的整个弹出代码：
<a href=
浏览 4提问于2017-07-27得票数 0
回答已采纳
我想使用带有ajax模板的Bootstrap Popover。下一个脚本运行良好..。
$('.popover-trigger').bind('click', function(k) {
var e=$(this);
title="Jeepieee"
$.get('/popover/'+e.data('pophtml'),function(d) {
e.popover({
浏览 3提问于2016-06-25得票数 0
我使用的是yii2的select2小部件。我想删除特定的类，因为正如select2提供的示例一样，它需要一个模型才能运行，而我不知道如何处理。还因为我没有足够的时间来应用select2小部件在yii2中实现的方式。
因为我是从yii2来的新手，所以我创建了一个下拉搜索的方式，我真的很想要select2的工作方式。
Html：
<span class="select2 select2-container select2-container--krajee select2-container--below select2-container--focus" dir="
浏览 20提问于2017-06-27得票数 2
回答已采纳
5回答
我想从div中删除类hide，popover类在每个链接上都有悬停，并且显示了我的popover，但是我的代码不能正常工作。
$(document).ready(function() {
$(".myPopover").each(function() {
var doc = $(this);
doc.mouseover(function() {
doc.find('.popover').removeClass('hide').addClass('show');
});
});
});
浏览 2提问于2018-01-31得票数 1
回答已采纳
我试图禁用select2内部输入搜索的自动焦点，特别是在移动设备上禁用键盘弹出。但是，如文档所示的
select2不会触发本机事件。select2也不会触发事件的非本地版本，这不是一个问题，因为我们仍然可以在不破坏兼容性的情况下添加本机事件。
因此，我能做的唯一方法就是尝试将当前处于焦点状态的select2中的每个输入框都设置为“失去焦点”，但是没有运气。
$("select").select2().on("select2-open",":input",function(){
setTimeout(function(){
浏览 0提问于2018-10-11得票数 0
回答已采纳
当将一个元素封装在其中时，component组件工作得很好，例如：
<v-popover offset="0" placement="right">
<span>My awesome span</span>
<template slot="popover">My awesome popover</template>
</v-popover>
但是，我想为v-popover组件指定目标元素，而不包装元素。这个popover是在一个组件中生成的，该组件在页面上被多次实例化
浏览 3提问于2021-09-16得票数 0
回答已采纳
当你在弹出窗口外单击时，是否可以关闭引导弹出窗口，但当你在弹出窗口内单击时，它会保持打开状态。我知道以前在中已经讨论过这个问题，但是当你在弹出窗口内单击时，这个也会关闭。
这是他们的演示：
var $poped = $('.poped');
$poped.popover();
// Trigger for the popover
$poped.each(function() {
var $this = $(this);
$this.on('hover',function() {
var popover = $th
浏览 0提问于2012-11-05得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
