首页 web前端 js教程 Select2插件 点击、选中事件实例详解

Select2插件 点击、选中事件实例详解

Jun 26, 2017 am 09:25 AM
事件 插件 点击 选中


HTML
<input type=&#39;text&#39; class="select" />

这个就可以很简单的使用了 

其他配置项可以到官网看
登录后复制
http://select2.github.io/options.html#core-options
登录后复制
今天主要说下事件

原因
登录后复制
在开发中遇到最多的就是ajax加载数据之后,选中的一个时,要进行二级联动,甚至三级联动 这个就需要事件的支持了

正题:

开发中最常用的就是 选中一个时,出发一个事件   这个事件的话就jQuery 的change事件

select2的事件的话 也是可以使用这个API

<input type=&#39;text&#39; class=&#39;demo&#39; />

这个是每当下拉框值有变化的时候
$(".demo").on("change",function(e){
    // e 的话就是一个对象 然后需要什么就 “e.参数” 形式 进行获取
登录后复制
<em>  console.log(e);<br>})<br><br>打印出来的截图<br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8ba02fb26ae9ecc0c51147d21e78ce6e-0.png" class="lazy" alt=""></em>
登录后复制
获取select2选中的的值
$(".demo").on("select2:select",function(e){

    // e 的话就是一个对象 然后需要什么就 “e.参数” 形式 进行获取
登录后复制
})
登录后复制
<em>这样就获取到选中的值<br><br>下面时官网提供所有的事件 给大家做个参考<br><br><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8ba02fb26ae9ecc0c51147d21e78ce6e-1.png" class="lazy" alt=""></em>
登录后复制

以上是Select2插件 点击、选中事件实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PyCharm新手指南:全面了解插件安装! PyCharm新手指南:全面了解插件安装! Feb 25, 2024 pm 11:57 PM

PyCharm是一款功能强大且受欢迎的Python集成开发环境(IDE),提供了丰富的功能和工具,使得开发者们可以更加高效地编写代码。而PyCharm的插件机制更是其功能扩展的利器,通过安装不同的插件,可以为PyCharm增加各种功能和定制化的特性。因此,对于PyCharm新手来说,了解并熟练安装插件是至关重要的。本文将为你详细介绍PyCharm插件安装的全

在Illustrator中加载插件时出错[修复] 在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息?一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题,但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误,我们将在本文中指导您修复问题,请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息,您可以使用以下用途:以管理员身

Chrome的插件扩展程序安装目录是什么 Chrome的插件扩展程序安装目录是什么 Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么?正常情况下,Chrome插件扩展程序的默认安装目录如下:1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

分享Edge浏览器不支持此插件的三种解决办法 分享Edge浏览器不支持此插件的三种解决办法 Mar 13, 2024 pm 04:34 PM

  用户使用Edge浏览器的过程中可能会添加一些插件来满足自己更多的使用需求。但是在添加插件时显示不支持此插件,这该如何解决?今日小编就来给大家分享三种解决办法,快来试试吧。  方法一:尝试用其他的浏览器。  方法二:浏览器上的FlashPlayer可能过时或者丢失,导致此插件不受支持状态,可在官网下载最新版本。  方法三:同时按下“Ctrl+Shift+Delete”键。  点击“清除数据”,重新打开浏览器即可。

PyCharm社区版支持的插件足够吗? PyCharm社区版支持的插件足够吗? Feb 20, 2024 pm 04:42 PM

PyCharm社区版支持的插件足够吗?需要具体代码示例随着Python语言在软件开发领域的应用越来越广泛,PyCharm作为一款专业的Python集成开发环境(IDE),备受开发者青睐。PyCharm分为专业版和社区版两个版本,其中社区版是免费提供的,但其插件支持相对专业版有所限制。那么问题来了,PyCharm社区版支持的插件足够吗?本文将通过具体的代码示例

在iPhone锁屏上获取即将到来的日历事件 在iPhone锁屏上获取即将到来的日历事件 Dec 01, 2023 pm 02:21 PM

在运行iOS16或更高版本的iPhone上,您可以直接在锁定屏幕上显示即将到来的日历事件。继续阅读以了解它是如何完成的。由于表盘复杂功能,许多AppleWatch用户习惯于能够看一眼手腕来查看下一个即将到来的日历事件。随着iOS16和锁定屏幕小部件的出现,您可以直接在iPhone上查看相同的日历事件信息,甚至无需解锁设备。日历锁定屏幕小组件有两种风格,允许您跟踪下一个即将发生的事件的时间,或使用更大的小组件来显示事件名称及其时间。若要开始添加小组件,请使用面容ID或触控ID解锁iPhone,长按

pycharm插件在哪 pycharm插件在哪 Dec 04, 2023 pm 03:39 PM

安装步骤:1、打开PyCharm,并点击顶部菜单栏中的“File”选项;2、选择“Settings”;3、在设置窗口中,选择“Plugins”选项;4、点击“Browse repositories…”按钮,将看到所有可用的插件;5、在搜索框中输入要安装的插件的名称,然后点击“搜索按钮”;6、找到要安装的插件,点击插件名称的右侧的“Install”按钮;7、安装完成重启即可。

PyCharm插件安装技巧分享,让你事半功倍! PyCharm插件安装技巧分享,让你事半功倍! Feb 21, 2024 pm 06:36 PM

PyCharm是一款功能强大的Python集成开发环境,通过安装插件可以进一步提高开发效率和方便开发者的工作。本文将分享一些PyCharm插件安装的技巧,让你事半功倍,同时提供具体的代码示例来演示插件的使用方法。第一步:打开PyCharm,点击菜单栏中的“File”(文件),然后选择“Settings”(设置)。第二步:在Settings窗口中,点击左侧的“

See all articles