select2 将类添加到所选选项

2024-03-14

我想添加类option在 select2 中,所以在我单击建议列表项后,它将添加自定义类添加到选择多个到主要的选择结构。

这是示例代码:

<select id="myselect2" multiple="multiple" style="width:50%;">
    <option>One</option>
    <option>Another option</option>
    <option>Hello there</option>
</select>

单击建议列表的第一个元素后:

_________检查的 HTML 输出___________________

<select id="myselect2" multiple="" style="width:50%;" data-select2-id="myselect2" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
// result 
  <option data-select2-id="4" class="added-to-select-multiple">One</option>
  <option data-select2-id="5">Another option</option>
  <option data-select2-id="6">Hello there</option>
</select>

如何实现这一目标?我正在尝试:

$('#myselect2').trigger({
        type: 'select2:select',

});

但我还没有找到解决方案,我想我还没有找到解决方案。

Fiddle: https://jsfiddle.net/Friiz/19rootn5/1/ https://jsfiddle.net/Friiz/19rootn5/1/

谢谢你的帮助!


这可能是一种方法:

$('#myselect2').select2();
    
$('#myselect2').on('change', function(){
    $(this).find('option').removeClass('added-to-multiple-select');
    $(this).find('option:selected').addClass('added-to-multiple-select');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="myselect2" multiple="multiple" style="width:50%;">
  <option>One</option>
  <option>Another option</option>
  <option>Hello there</option>
</select>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

select2 将类添加到所选选项 的相关文章

  • jQuery 中的 Javascript .files[0] 属性

    jQuery 中是否有与此语句等效的语句 var value document getElementById id files 0 使用附加 files 0 的标准 jQuery 选择器似乎不起作用 并且我找不到与 files 等效的 jQ
  • 如何动态添加和删除jquery选项卡?

    我有一个 aspx 页面 上面有 2 个静态 jquery 选项卡 单击其中一个选项卡上的按钮后 我想动态添加一个新选项卡 该选项卡从另一个 aspx 页面加载其内容 我也尝试使用以下示例 http jquery ui googlecode
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 有没有模拟 Facebook 游览的 jQuery 插件?

    我指的是 Facebook 游览 可能使用开箱即用的 Facebook CSS 我已经知道这两个 http tympanus net codrops 2010 12 21 website tour http tympanus net cod
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • 获取一行中的最后一个 li jQuery

    我们有一个简单的ul ul li some text li li some some text li li text more li li text here li ul ul text align center width 100px l
  • 使用 CSS 的样式选择选项

    我正在尝试使用 CSS 设置选择选项列表的样式 我希望列表的时间之间有更多的填充 因为它们似乎被压在一起 我尝试向选项元素添加填充 但这似乎不起作用 有任何想法吗 这是我的代码 HTML
  • 如何以编程方式禁用 元素上的自动选择?

    然后用户使用 TAB 或 SHIFT TAB 跳转 到某个文本框 并且该文本框恰好有一个值 那么该值将被自动选择 我想禁用此行为 我认为这可以在 focusin 事件处理程序内部完成 input text focusin function
  • 使用 jQuery 在页面之间滑动

    我有一个 4 页的网站 我想用幻灯片效果在 4 页之间进行转换 我不想使用 ID 来执行此操作 我想按按钮或链接滑动到下一页 我知道这可以使用 jQuery 来完成 并且我见过这样做的网站 请帮忙 预先感谢所有建议 批评和意见 查看本教程和
  • jqGrid 按列名排序索引

    简单的问题 是否有函数可以按网格中的名称获取列的当前排序位置 中使用的索引remapColumns方法与中相同colModel大批 重要的是要理解 索引可以不同 如colModel最初使用的jqGrid参数 如果jqGrid使用选项rown
  • Socket.io 如何判断某人何时离开

    我正在使用 socket io 创建一个实时游戏 目前 当有人离开时 什么也不会发生 我想以某种方式通知服务器说谁离开了 有没有办法在用户离开时发出正确的信息 我可以让服务器每 1000 毫秒对每个人执行一次 ping 操作 或者通过其他方
  • jqGrid - 如何将网格设置为最初不加载任何数据?

    如何创建网格但不加载任何数据 如果我省略url选项然后loadError回调被触发 目前我们设置url NoData json其中 NoData json 是一个静态文件 其中没有行 问题出在我们的loadComplete如果网格不包含数据
  • 节省页面加载时间的提示[重复]

    这个问题在这里已经有答案了 我的问题 削减那些不必要的 kb 并使页面加载速度更快的最佳方法是什么 全部是什么优化实践 编码实践 在js php中 如果执行可以使您的页面更轻 为什么我问这个 我读了这篇关于 jquery js 与 jque
  • Ajax调用完成后执行函数

    我是 Ajax 新手 我尝试在使用 for 循环时使用 Ajax Ajax 调用之后 我正在运行一个使用 Ajax 调用中创建的变量的函数 该函数只执行两次 我认为 Ajax 调用可能没有足够的时间在循环开始之前进行调用 有没有办法在运行
  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符
  • 插入四个空格而不是制表符

    我试图在按下 Tab 键时插入四个空格 我正在使用以下代码 请参阅spaces t 但是当我将其切换到spaces 当我按 Tab 时只插入一个空格 我还尝试了 function textarea keydown function e va
  • 来自 ajax 的 Bootstrap 表 json

    我有 ajax 和 bootstrap 表的问题 我有一个 ajax JSON 我用这个方法调用 document ready function ajax url php process php method fetchdata dataT

随机推荐

  • PHP 中如何存储持久数据库连接?

    如文档中所述sqlite popen http de php net manual en function sqlite popen phpphp 尝试利用持久资源机制 哪里详细描述了这个机制 是否可以查看当前存储 使用的所有资源 是否可以
  • 在哪里放置不同测试类的通用设置代码?

    我有几个不同的测试类 它们要求在运行这些测试之前创建某些对象 现在我想知道是否应该将对象初始化代码放入单独的帮助器类或超类中 这样做肯定会减少我的测试类中重复代码的数量 但也会降低它们的可读性 是否有如何处理单元测试的常见设置代码的指南或模
  • 存储缓冲区是否保存现代 x86 上的物理地址或虚拟地址?

    现代 Intel 和 AMD 芯片大存储缓冲区 https stackoverflow com a 54880249 149138在提交到 L1 缓存之前缓冲存储 从概念上讲 这些条目保存存储数据和存储地址 对于地址部分 这些缓冲区条目是否
  • GtKGLArea 无法创建 OpenGL 2.1 上下文

    我目前正在为我的游戏引擎项目开发一个简单的编辑器 虽然该项目似乎在我的主工作站 支持 OpenGL 3 3 的 GTX 650Ti 上运行得很好 但当我在我的设备上测试它时 它似乎被破坏了 测试桌面 GMA4500 最大支持 OpenGL
  • 无法让 GLFW 链接

    我正在尝试编译以下测试程序 include
  • jquery 使用变量中的名称按类选择元素

    我想在 jQuery 中对与某个类名匹配的所有元素执行一些操作 类名来自变量 如何使用我的变量按类进行选择 var x this attr href slice 1 这将设置x等于的名称class I want 现在我想选择具有该类名的所有
  • Sublime Text 3 中的 React.js 文件语法

    我使用 Sublime Text 3 作为我的代码编辑器 我在 React 中编写了一个基本的 hello world 示例 但是代码上的着色不正确 我尝试安装 Babel 插件 但即使在那之后 着色似乎也不起作用 如下图所示 仅仅安装它是
  • 扩展“Prettier - Code Formatter”无法格式化 - (Mac v8.0)

    Prettier 遇到无法格式化的问题 我选择了保存格式 默认格式设置为使用 Prettier 昨天工作正常 现在保存时或运行格式文档命令时没有格式化 没有更改任何设置 我确实尝试卸载并重新安装 Prettier 强制格式化文档也会返回错误
  • 如何在通用 Windows 应用程序中使用 System.Net.Http.HttpClient 忽略自签名证书

    我正在创建一个可移植类库 这意味着据我所知 我必须使用 System Net Http HttpClient 来调用我的 Web API 挑战在于 对于我的通用 Windows 应用程序 我无法弄清楚如何忽略由于 API 服务器可以拥有自签
  • Swift 中的二进制到十六进制

    我有一个二进制字符串 例如 00100100 我想要十六进制字符串 例如 24 Swift 中是否有一种将二进制转换为十六进制的方法 一个可能的解决方案 func binToHex bin String gt String binary t
  • 打印 java scriptlet 变量,就好像它是 JavaScript 变量一样

    你好 我需要在jsp内的标签内的javascript调用内输出一个java变量 例如
  • 启动时依赖 CLR 的程序集解析

    当程序启动时 CLR 是否尝试解析 不一定加载 所有依赖程序集 也就是说 依赖的大会决议是按需完成的吗 请注意 我不是在谈论 Assembly Load Reflective 类型的负载 JIT 编译器负责指导程序集的加载 以响应将 IL
  • 如何在 Blazor 中订阅 onscroll 事件?

    我试图对 Blazor 中的 onscroll 事件做出反应 以便在用户向下滚动网页时为图像设置动画 类似于此网站上的品牌徽标 https lebenswelten stgabriel at https lebenswelten stgab
  • 拖动按钮时 ScrollView 不滚动

    我有一个滚动视图 当它上面没有按钮时 它会滚动 现在确实如此 当拖动鼠标 在模拟器上 时 什么也没有发生 我认为是因为按钮被按下 我怎样才能做到这一点 发生这种情况是因为UIButton的子视图UIScrollView 我假设按钮在您的情况
  • 如何将原始 SQL 查询放入 Sequel 中

    我正在尝试将 SQL 代码转换为 Seqel 以从我的脚本运行它 我如何转换这个 select code count 1 as total from school districts group by code order by total
  • 从 SQL Server 中的 XML 选择空值

    我正在尝试从具有 null 作为属性之一的 XML 中进行选择 它没有返回 null 而是返回 0 我做错了什么 请参阅下面的代码进行复制 declare a xml select a
  • 将变量传递给jsp

    我有一个java类 public void doView RenderRequest renderRequest RenderResponse renderResponse throws IOException PortletExcepti
  • 使用 RxJava 进行电子邮件登录验证,可观察对象发出两次

    我正在制作一个简单的登录表单 电子邮件和密码 来尝试增强我的反应式编程技能 我在让电子邮件字段验证按照我想要的方式工作时遇到一些问题 这是我的代码 final Observable
  • 如何在 Linux 中获取文件创建日期?

    我正在处理一批文件 这些文件包含同一对象在其生命周期不同时间的信息 对它们进行排序的唯一方法是按创建日期 我正在使用这个 char buffer has the name of file struct stat buf FILE tf tf
  • select2 将类添加到所选选项

    我想添加类option在 select2 中 所以在我单击建议列表项后 它将添加自定义类添加到选择多个到主要的选择结构 这是示例代码