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

简单介绍

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

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

赞 (0)

相关推荐

  • jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

    各种对下拉列表.文本框.复选框.单选框的jquery的相关操作.做为记录和收藏的最好方法. 遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each

  • 在jquery repeater中添加设置日期,下拉,复选框等控件

    在jquery repeater中添加设置日期,下拉,复选框等控件

    如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater. 示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar 本文将详细的讲解 Repeater 控件的模板中如何处理控件, 目录如下: * 准备 * html 元素 * 文本框 * 下拉框 * 多行文本框 * 复选框 * jQueryUI 插件 * jQueryUI 日期框 * jQueryUI 按钮 * jQueryUI 自动匹配 示例图

  • jquery 操作单选框，复选框，下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码 代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

  • jQuery获取(选中)单选,复选框,下拉框中的值

    实例如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><m

  • js和jquery分别验证单选框、复选框、下拉框

    本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen

  • bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

    bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

    前言 最近几天在公司做了个后台管理系统的小模块,其中有个功能是实现复选框的全选和全不选,用bootstrap和jQuery来实现. 效果是这样: 因为是内部用,样式也不要求太好看,直接上代码. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

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

    简单介绍 jquery.sumoselect是一款跨设备.跨浏览器的jQuery下拉列表框插件.该jQuery下拉列表框插件可以单选,也可以多选.它的样式可以通过CSS文件来自定义.它的最大特点是可以跨设备使用,所有设备上功能都是一致的. 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选. 可以通过CSS文件来自定义样式. 支持绝大多数的设备. 根据设备智能渲染. 在Android.IOS.Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框. 可以自定义提交数据

  • 自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码

    自定义实现 PyQt5 下拉复选框 ComboCheckBox 一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下拉复选框,主要就是继承 QComboBox 类,然后将复选框 QCheckBox 加入其中,并实现相应的功能. 最终实现的下拉复选框效果如下: 二.代码实现 1.主要方法 在 PyQt5 中,有几个主要的方法需要了解一下,方法名称和对应

  • Bootstrap 下拉多选框插件Bootstrap Multiselect

    引入文件: <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <script type="text/ja

  • jQuery模拟html下拉多选框的原生实现方法示例

    jQuery模拟html下拉多选框的原生实现方法示例

    本文实例讲述了jQuery模拟html下拉多选框的原生实现方法.分享给大家供大家参考,具体如下: 用js, html, css 简单的实现一个HTML 下拉多选框,不试用其他框架的情况下,可以借鉴一下,如果用jqueryUI, BOOTSTRAP, 就没必要参考了.毕竟那些现成的东西更好用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-

  • layui实现下拉复选功能的例子(包括数据的回显与上传)

    一.layui下拉复选实现的背景:实现一个管理员拥有多个权限 二. 具体实现: //依赖资源 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.css" rel="external nofollow" /> &

  • jquery模拟多级复选框效果的简单实例

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c

  • ExtJS 下拉多选框lovcombo

    开始以为很简单,在option里加个input checkbox就行了.哪知行不通,网上搜了一些实现方法,主要是用div层来模拟下拉.本想照着这种思路,再结合这个项目具体应用自己写一个,发现太麻烦了.刚好在另外一个项目中使用extjs,找到了一个扩展lovcombo,学习了一下它自带的例子(配合2.3版的extjs,3.x版的貌似有问题).例子倒不难,关键是要把它添加到现有的代码中,并且尽量少的改动原有代码. 下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事

  • bootstrap 下拉多选框进行多选传值问题代码分析

    bootstrap 下拉多选框进行多选传值问题代码分析

    项目开发遇到个问题,就是引入bootstrap下拉多选框进行多选的时候,用form表单提交到后台,获取不到多选的值,只能获取的选择的第一个值. 纠结了会. jsp页面需要引入这东东~ <link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" > <script

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

随机推荐