博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
select多选(multiSelect)的使用
阅读量:5276 次
发布时间:2019-06-14

本文共 846 字,大约阅读时间需要 2 分钟。

1.使用js包

bootstrap-multiselect-master

需要对应的js,css文件

2.定义select标签

<select id="produce" multiple="multiple" class="multiselect">

//option标签省略

</select>

3.设定select属性

$("produce").multiselect({

buttonClass:'multiSelect-btn',

buttonWidth:'auto',

includeSelectAllOptions:true,

selectAllText:'全选',

buttonContainer:'<div class="btn-group"/>',

buttonText:function(options){

 var selected="";

if(options.length == 0){

    return "请选择"+'<b class="caret"></b>';

}else{

    options.each(function(){

       selected+= $(this).text()+',';

    });

     return selected.substr(0,selected.length-1)+'<b class="caret"></b>';

});

注意:1.在multiselect方法中,可以通过一些属性值设定自己需要的多项选择

         2.通过$("#produce").val() 获取的值是数组的形式;同样赋予其初始值时,也需要数组的形式 

         eg: var selecteds="producePlan,peoduceList,produceCheck";

               $("#produce").val(selecteds.split(",")); //则默认选中三个选

       

 

转载于:https://www.cnblogs.com/cjm-learn/p/5519671.html

你可能感兴趣的文章
Magento开发文档(三):Magento控制器
查看>>
性能调优攻略
查看>>
ie6解决png图片透明问题
查看>>
瞬间的永恒
查看>>
2019-8-5 考试总结
查看>>
JS中实现字符串和数组的相互转化
查看>>
web service和ejb的区别
查看>>
Windows Azure Cloud Service (29) 在Windows Azure发送邮件(下)
查看>>
CS61A Efficiency 笔记
查看>>
ArcGIS Server Javascript 多图对比功能
查看>>
微信上传素材返回 '{"errcode":41005,"errmsg":"media data missing"}',php5.6返回
查看>>
div或者p标签单行和多行超出显示省略号
查看>>
Elasticsearch 滚动重启 必读
查看>>
Hadoop基本概念
查看>>
java.util.zip压缩打包文件总结一:压缩文件及文件下面的文件夹
查看>>
浅说 apache setenvif_module模块
查看>>
MySQL--数据插入
查看>>
重新学习python系列(二)? WTF?
查看>>
shell脚本统计文件中单词的个数
查看>>
SPCE061A学习笔记
查看>>