select多选(multiSelect)的使用

Posted 2020-07-10 caojianming

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(",")); //则默认选中三个选