普通的下拉框框件只能选择唯一一个可选项，这里使用AdminLTE(bootstrap4)前端框架中的select2控件来实现
先看下效果图：
image.png
定义如下：
<div class="modal fade" id="modalId" data-backdrop="static">
....
<div class="form-group" style="width: 30%;" >
<select class="select2" multiple="multiple" data-placeholder="选择部门" style="width: 100%;" onchange="xxxPrepress()" id="involvedDepts" name="involvedDepts">
<option value="a">市场部</option>
<option value="b">运行部</option>
<option value="c">技术部</option>
<option value="c">业务部</option>
</select>
</div>
....
</div>
初始化：
<script>
$(document).ready(function() {
// 初始化Select2插件
$('#involvedDepts').select2();
});
</script>
取值，形式是一个数组：
image.png
赋值：
image.png
TIPS: 控件的隐藏
通常，我们在用完模态框时，会将使用“ $("#modalId").modal("hide"); ” 其卸载（隐藏，其中要包含各个控件初始化步骤，这里略过）以显示下面的父页面，但select2插件会在原始的<select>元素之外创建一个包裹层，并且对原始<select>元素进行一些隐藏处理。这意味着直接对原始<select>元素使用hide()或修改display属性可能不会达到预期的效果。在实践中发现，modal窗口隐藏后，父页面会显示下拉框列表，很难看。
为了解决这个问题，需要隐藏select2插件生成的包裹层，而不是原始的<select>元素。为此，再分别添加对模态窗的显示与隐藏的监听函数。
// 监听模态窗口的隐藏事件（select2插件会在原始<select>元素外面包裹一个带有select2-container类名的<span>元素，可以通过这个元素来隐藏整个组件）
$('#safePerformIndicModal').on('hidden.bs.modal', function () {
//复位已选选项
$('#involvedDepts').val([]).trigger('change');
// 隐藏select2的包裹层
var select2Container = $('#involvedDepts').data('select2').$dropdown;
select2Container.hide();
});
// 监听模态窗口的显示事件
$('#modalId').on('show.bs.modal', function () {
// 隐藏select2的包裹层
var select2Container = $('#involvedDepts').data('select2').$dropdown;
select2Container.show();
});
