当前位置:首页 > 日记 > 正文

jQuery.Sumoselect插件实现下拉复选框效果

jQuery.Sumoselect插件实现下拉复选框效果

简单介绍

jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。

该jQuery下拉列表框插件的特点有:

  • 可以进行单选,也可以进行多选。
  • 可以通过CSS文件来自定义样式。
  • 支持绝大多数的设备。
  • 根据设备智能渲染。
  • 在Android、IOS、Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框。
  • 可以自定义提交数据的格式(多选可以通过 csv 或默认形式来提交)。
  • 支持Selected、Disabled和占位文本。
  • 易扩展,开发者可以很容易的创建新的组件。
  • 使用基本方法间隙管理如添加选项、删除选项、禁用、选择等。

该jQuery下拉列表框插件需要使用jQuery 1.8.3+版本,建议使用最新版本的jQuery。

1、官方网站:

https://hemantnegi.github.io/jquery.sumoselect/  说明介绍网址
https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html   demo网址

2、实现效果

3、代码demo

首先引入js与css文件

<link href="css/sumoselect.css" rel="external nofollow" rel="stylesheet"> <script src="vendor/jquery.sumoselect.js"></script> 

然后在html里面添加select标签:

<select multiple="multiple" placeholder="咨询,建议" class="SlectBox" id="SlectBox" required style="width: 160px"></select> 

最后在js代码中添加代码:

$('.SlectBox').SumoSelect({   csvDispCount: 3,   captionFormat: '已选择:{0}(个)',   selectAll:true,   captionFormatAllSelected: "全选",   okCancelInMulti: true,   locale : ['确定', '取消', '']  }); 

注意:官网中有许多的属性,同时还能在select下拉框中绑定许多的事件:

当我们想要下拉框二级联动的时候,通过下面的事件,刷新select标签中的内容实现下拉框的二级联动。

//重新加载select标签中的数据 $('#SlectBox')[0].sumo.reload(); 

总结

以上所述是小编给大家介绍的jQuery.Sumoselect插件实现下拉复选框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

入门:AI旋转复制法使用方法

入门:AI旋转复制法使用方法

使用方法,入门,电脑软件,AI,前面我们已经介绍了ai软件里面常用的两种复制方法,接下来我们介绍第三种复制方法&mdash;&mdash;旋转复制法。1、新建画布,用矩形工具任意在画布上绘制一个小横条红色矩形2、在软件界面左边的工具栏里面,有个旋转箭…

JS实现手写parseInt的方法示例

JS实现手写parseInt的方法示例

方法,示例,电脑软件,JS,parseInt,前言本文主要给大家介绍了关于JS实现手写parseInt的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。手写parseInt的实现:要求简单一些,把字符串型的数字转化为真正的数字即可,但不能使…

如何通过模仿快速提高PPT制作水平

如何通过模仿快速提高PPT制作水平

快速,电脑软件,PPT,  想快速提高自己的PPT水平保持一颗好奇心就足够了,但如果对PPT的一些基本设计原理都缺乏了解,发现一个PPT的设计之美是很困难的,这时候,最好的方法就是模仿。以下是小编为您带来的关于通过模仿快速提高PPT制作水平,希望对…

js从输入框读取内容,比较两个数字

js从输入框读取内容,比较两个数字

数字,输入框,方法,读取,大小,因为从输入框读取的内容是String类型的,所以直接比较的话,是用asc码来比较的,如果要比较数字的大小应该加上parseFloat,比如:if(parseFloat(amnt1) < parseFloat(amnt2)){}以上这篇js从输入框读取内容,比较两个数字…

ps怎么使用动作是对图形进行多色填

ps怎么使用动作是对图形进行多色填

填充,图形,多色,动作,电脑软件,ps中想要填充图形,该怎么填充不同颜色的图形呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、在桌面上双击Photoshop的快捷图标,打开Photo…

在Windows主机上绑定多IP和多域名

在Windows主机上绑定多IP和多域名

主机,绑定,多域名,详解,常用,本文介绍Windows主机绑定多IP和多域名常用办法,多IP和多域名配置往往使用在独立主机和虚拟专用服务器(VPS)上,按照一些SEO大佬的说法,独立IP可以给域名更高的权重,所以很多购买VPS的用户大都还给自己同一主机的域名购…

ps中怎么制作竹简上刻字的效果?

ps中怎么制作竹简上刻字的效果?

竹简,效果,电脑软件,ps,木刻字效果主要使用图层样式制作而成,现在就把制作的过程步骤以及截图分享出来,供大家参考使用,同时也希望你能分享更多更好的优质经验,效果如下文所示。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB…

xls文件怎么打开 xls文件打开空白

xls文件怎么打开 xls文件打开空白

文件,解决方法,空白,电脑软件,xls,  今天股市里面的一个老师发来一个 .xls 文件,说是什么报名表,让看一下,现在对天朝股市都已经没什么信息了,好吧,还是打开看一下吧,结果在我的笔记本上面双击,打开倒是可以,但是页面空白什么内容都没有,只能再去…

WPS演示中怎样通过命令按钮控制Fla

WPS演示中怎样通过命令按钮控制Fla

控制,动画,命令,演示,按钮,  在wps演示中可以通过控件来实现插入Flash动画,由于插入的Flash动画本身不包括控制按钮而用户又想控制动画暂停或继续播放,有什么方法可以实现呢?以下是小编为您带来的关于WPS演示中通过命令按钮控制Flash动画,希…

实现微信小程序的wxml文件和wxss文

实现微信小程序的wxml文件和wxss文

文件,支持,程序,电脑软件,webstrom,微信小程序的wxml文件和wxss文件在webstrom的支持ebstrom默认不支持wxml文件和wxss文件,所以要进入设置里面手动添加支持。对wxml文件的支持:文件 -> 设置 -> 编辑器 -> 文件类型,然后选择XML文件,然后点击下…

php 一维数组的循环遍历实现代码

php 一维数组的循环遍历实现代码

遍历,一维数组,循环,代码,电脑软件,一个简单的PHP循环一维数组的实例,先是把字符串按照一定的规则进行转换成为数组,然后再进行遍历输出,实际是一个很简单的方法,因为最近做的一个二维数组结构图搞得很头疼,所以一时半会儿想不起来如何进行遍历…

JS仿QQ好友列表展开、收缩功能 |

JS仿QQ好友列表展开、收缩功能 |

好友列表,第一篇,功能,电脑软件,JS,效果图如下所示:html:<ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <ul> <li>小明</l…