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


Posted in jQuery onNovember 09, 2017

简单介绍

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、实现效果

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

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插件实现下拉复选框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
You might like
php split汉字
2009/06/05 PHP
php定时执行任务设置详解
2015/02/06 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python中defaultdict的用法详解
2017/06/07 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python读取各种文件数据方法解析
2018/12/29 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python如何根据时间序列数据作图
2020/05/12 Python
大学生学习生活的自我评价
2013/11/01 职场文书
2014年元旦感言
2014/03/06 职场文书
中学教师师德承诺书
2014/05/23 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android