bootstrap-multiselect 使用说明

 

 
<link rel="stylesheet" href="themes/plugins/bootstrap-multiselect/css/ace.css"  /> 
<link rel="stylesheet" href="themes/plugins/bootstrap-multiselect/css/font-awesome.css" />
<link rel="stylesheet" href="themes/plugins/bootstrap-multiselect/css/bootstrap-multiselect.css" />

<html>
<select id="subject" name="subject" class="multiselect" multiple="" style="height:28px;width:160px;" ><{$option_subject}></select>
<input id='subject_selected' name='subject_selected' type="hidden"  value="" /> 

<script type="text/javascript">
//取值   $('#consult_subject').val()
//post取值 用 consult_subject_selected
if($('#consult_subject').val()!=null){
    $('#consult_subject_selected').val($('#consult_subject').val());
}
//多选 赋值

  $("#subject").val("");
  $("#subject").multiselect("refresh");

var multiselect_item = row.subject;    //aa="1,2,3"
var multiselect_arr= new Array();
var multiselect_arr =multiselect_item.split(",");      
$('#subject').multiselect('select', multiselect_arr);  //这里直接传aa是不行的

</script>

//下面是 必须有的
<script type="text/javascript" src="themes/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
jQuery(function($){
    ////////////////// btn-white btn-primary
    $('.multiselect').multiselect({
        enableFiltering: true,
        buttonClass: 'btn btn-white btn-primary',
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
            ul: '<ul class="multiselect-container dropdown-menu"></ul>',
            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
            li: '<li><a href="javascript:void(0);"><label></label></a></li>',
            divider: '<li class="multiselect-item divider"></li>',
            liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
        }
    });
    ///////////////////
});
</script>

 

posted @ 2020-05-14 16:14  海乐学习  阅读(1374)  评论(0)  编辑  收藏  举报