下拉多选框multiple-select——2021-03-30

下拉多选框插件multiple-select 取值回显

multiple-select插件网站：http://multiple-select.wenzhixin.net.cn/index.html?locale=zh_CN

用法：

1、动态添加选项、基本设置

注：二次定义下拉多选框时动态改变选项需先销毁再二次定义

$('#monthRepair').multipleSelect('destroy');

var option = [], monthValue = [];
//替换原插件自带全选功能，实现全选复选框跟其他选项互斥
option.push({value: 'checkAll', text: '全年'});
for (var m = minm; m <= maxm; m++) {
      var t = m < 10 ? "0" + m + '月' : m + '月';
      option.push({
            value: m,
            text: t
      });
      monthValue.push(m);
}
$('#monthRepair').multipleSelect({
    allSelected: "全部",
    selectAllText: '全选',
    data: data    
    //若不需要全选功能
    //selectAll: false,
    //替换全选选项显示内容
    formatSelectAll () {
          return '[全年]'
    },
    //替换全选中是显示内容
    formatAllSelected () {
          return '全年'
    },
});

2、使用方法

①设置选中选项/获取选中项的值（数组存值）——也可'text'

//设置被选中的选项值，赋值数组
$("#Region").multipleSelect('setSelects', jobRegion);
//获取选中选项的值（数组）
var regionData = $('#Region').multipleSelect('getSelects', 'value');

②下拉框是否打开

//打开
$("#Region").multipleSelect('open'); 
//关闭
$("#Region").multipleSelect('close'); 

③设置选中某一个选项/取消选中某一个选项

//选中添加的全选选项
$("#monthRepair").multipleSelect('check', 'checkAll');
//取消选中全选选项
$("#monthRepair").multipleSelect('uncheck', 'checkAll');

 ④全选/全不选

//全选
$("#Region").multipleSelect('checkAll');
//全不选
$("#Region").multipleSelect('uncheckAll');

⑤反向选中选项

$("#Region").multipleSelect('checkInvert')

⑥动态添加选项

var $input = $('#refreshInput');
var $selected = $('#refreshSelected');
var $disabled = $('#refreshDisabled');
var value = $.trim($input.val());
var $opt = $('<option />', {
     value: value,
     text: value
});
if (!value) {
    $input.focus();
    return;
}
if ($selected.is(':checked')){
    $opt.prop('selected', true);
}
if($disabled.is(':checked')){
    $opt.attr('disabled', true);
}
$input.val('')
$select.append($opt).multipleSelect('refresh');

⑦销毁

$("#Region").multipleSelect('destroy')