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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
Highcharts入门之简介
2016/08/02 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
使用svg实现动态时钟效果
2018/07/17 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python MD5加密实例详解
2017/08/02 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python如何获取文件路径/目录
2020/09/22 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
借款担保书范文
2014/05/13 职场文书
企业承诺书怎么写
2014/05/24 职场文书
材料化学专业求职信
2014/07/15 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
环境卫生整治简报
2015/07/20 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Java完整实现记事本代码
2022/06/16 Java/Android
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS