jquery sumoselect  插件实现 select下拉 复选框,这是国外的大牛写的,参考网站如下:

http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html  官方demo网站

http://hemantnegi.github.io/jquery.sumoselect/  官网的方法使用说明.

1.只需要导入js和css,就可以直接在select上加一个,关键是multiple="multiple",就可以使用这个下拉复选框了,使用的方式如下:

$(document).ready(function () {

$('.SlectBox').SumoSelect({placeholder: 'This is a placeholder',csvDispCount: 3 });

});        运行结果为:

0818b9ca8b590ca3270a3433284dd417.png

这些样式,还有更复杂的分组选择,如果要获取的选中的value值,我是自己写的遍历each选中的,然后用,逗号分割,传给后台的时候,再变成数组,如下代码:(在官网没有看到获取选中value的方法,有朋友知道可以告诉我):

//==========遍历多选===============

var positionRankSelectSpilt = "";

$("#positionRank option:selected").each(function(){

positionRankSelectSpilt += $(this).val()+ ",";

});

//职级的多选去掉最后一个逗号

positionRankSelectSpilt = positionRankSelectSpilt.substring(0,positionRankSelectSpilt.length -1);

alert("选中的:"+positionRankSelectSpilt);

//=====================================

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐