如何实现同一时间仅一个多选下拉菜单处于展开状态

你需要分别监听Bootstrap SelectPicker组件和原生select两类控件的展开事件，触发时主动关闭另一类的展开状态即可实现互斥展开，具体实现代码如下：

// 监听Bootstrap SelectPicker展开事件，触发时关闭原生select
$('#list2_items').on('show.bs.select', function() {
  // 原生select失焦会自动收起下拉
  document.getElementById('2').blur();
});

// 监听原生select点击事件，触发时关闭Bootstrap SelectPicker
document.getElementById('2').addEventListener('click', function() {
  // 调用Bootstrap Select官方提供的收起方法
  $('#list2_items').selectpicker('hide');
});

// 可选补充：点击页面空白区域自动收起所有下拉
$(document).on('click', function(e) {
  if (!$(e.target).closest('.dropdown-check-list, .form-dropdown').length) {
    $('#list2_items').selectpicker('hide');
    document.getElementById('2').blur();
  }
});

• 代码说明：
  • 完全适配你现有代码中两个下拉的ID，直接插入页面脚本即可生效
  • 用到的show.bs.select事件、selectpicker('hide')方法都是Bootstrap Select官方提供的标准能力，原生select失焦自动收起是浏览器默认行为，兼容性有保障

内容的提问来源于stack exchange，提问作者user16396247