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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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来处理多个提交任务
2006/10/09 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
什么是Python装饰器?如何定义和使用?
2022/04/11 Python