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="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();
在官网下载demo一看便知!