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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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的FTP学习(四)
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
php 伪静态之IIS篇
2014/06/02 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
python实现转圈打印矩阵
2019/03/02 Python
python开头的coding设置方法
2019/08/08 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
竞选文艺委员演讲稿
2014/04/28 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang