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绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现图片放大镜效果
Dec 23 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
星际流派综述
2020/03/04 星际争霸
给初学PHP的5个入手程序
2006/11/23 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python pickle模块用法实例
2015/04/14 Python
python中的字典使用分享
2016/07/31 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python如何生成网页验证码
2018/07/28 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python实现自动签到脚本功能
2020/08/20 Python
品管员岗位职责
2013/11/10 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
给医院的感谢信
2015/01/21 职场文书
学生会辞职信
2015/03/02 职场文书
应聘教师自荐信
2015/03/26 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python