代码展示:http://www.51xuediannao.com/demo.php

代码说明:

select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder,
可以设置禁用状态disabled,并且设置非常简单,如:$(".js-example-disabled").prop("disabled", false);

select2.js默认值设置:$("#select2").val("1").trigger("change");  多选的默认值可以使用$("#select2").val(["1","2"]).trigger("change");  这样传递数组过去。

select2还有丰富的自定义事件

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
$("#select2").on("change", function (e) { log("change"); });

更多丰富的select2用法请参考https://select2.github.io/examples.html,也会在稍后给出实际应用中的一些例子,和一些方便调用的小花招。

select2小花招:自己定义当前选中的selected值,我们在select2的节点上给出一个<select class="test1" data-selected="2"> 看红色部分,然后我们就可以在设置选中值得时候就可以使用如下js代码,

$("#select2").val(function(){
                  return $(this).data("selected")
              }).trigger("change");

利用val()接收一个函数,而且可以利用 this

html select美化模拟jquery插件select2.js的更多相关文章

  1. jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案

    jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...

  2. jquery插件select2事件不起作用(select2-3.5.4)

    jquery插件select2事件不起作用 >>>>>>>>>>>>>>>>>>>&g ...

  3. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  4. 帮助更语义化的显示时间的jQuery插件 - tidyTime.js

    来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15  显示成 ...

  5. jQuery插件select2跨域设置xhrFields参数

    ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...

  6. JQuery插件supersized.js实现背景图片淡入浅出

    淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索. 下面是这个效果的代码只有一行: ...

  7. JQuery插件 aos.js

    简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. ...

  8. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  9. jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...

随机推荐

  1. HTML5学习之跨文档传输消息(七)

    新标准中提供了文档之间直接的消息传输API.而且不限制跨域消息传递! 发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了,但给哪个window对象发送 ...

  2. WebApi 2:属性路由 [Route()],attribute routing

    原文:http://www.asp.net/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2 属性 ...

  3. [转]GridView中直接新增行、编辑和删除

    本文转自:http://www.cnblogs.com/gdjlc/archive/2009/11/10/2086951.html .aspx <div><asp:Button ru ...

  4. javascript继承(六)—实现多继承

    在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...

  5. MongoDB 聚合 (转) 仅限于C++开发

    MongoDB除了基本的查询功能,还提供了很多强大的聚合工具,其中简单的可计算集合中的文档个数, 复杂的可利用MapReduce做复杂数据分析. 1.count count返回集合中的文档数量 db. ...

  6. 电脑突然死机,系统日志记录事件ID=6008

    刚才正在写代码,在一次保存之后,正要刷新看下效果,电脑突然关机,没有任何提示或延迟.我的笔记本电池是一直插上的,也连接着电源. 重新开机之后,找到系统日志查看.只有这一条错误记录:非正常关机,事件60 ...

  7. 带有可点击区域的图像映射:HTML &lt;map&gt; 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  8. 深入理解JavaScript系列(33):设计模式之策略模式(转)

    介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...

  9. tensorflow安装调试总结(持续更新)

    这段时间需要部署tensorflow到linux上,由于堡垒机不能连外网,所以pip.apt-get.wget.git统统不能用,然后就是各种调试了,下面整理了一些遇到的问题和解决方案,供大家参考(C ...

  10. Confluence 6 SQL Server 创建一个数据库和数据库用户

    一旦你成功安装了 SQL Server 服务器,请按照下面的方法为你的 Confluence 创建数据库用户和数据库: 使用你的 SQL 管理员权限,创建一个新的数据库(例如 confluence). ...