jQuery实现bootstrap-multiselect多选下拉框改单选下拉框

核心实现逻辑：插件本身未提供直接切换单选/多选模式的API，需通过「销毁现有实例→修改原生select属性→按新模式重初始化」的流程实现，不会出现事件残留、选中值不同步的问题。

• 销毁实例：调用插件内置的destroy方法，清除已生成的下拉DOM、绑定的事件监听，避免污染
• 修改原生属性：bootstrap-multiselect的单选/多选模式本质是读取原生select标签的multiple属性，移除该属性即可标记为单选模式
• 重初始化：按照单选场景的配置重新调用multiselect初始化方法即可

具体代码实现 #

// 在你的特定触发条件回调中执行该切换逻辑
const switchSelectToSingle = function() {
  // 如需保留切换前已选中的值，先暂存
  const selectedVal = $(".select-drp").val();

  // 1. 销毁已初始化的多选实例
  $(".select-drp").multiselect('destroy');

  // 2. 移除原生select的multiple属性，切换为单选
  $(".select-drp").removeAttr('multiple');

  // 3. 重新初始化单选模式的multiselect，可按需补充自定义配置
  $(".select-drp").multiselect({
    nonSelectedText: '请选择',
    // 单选场景下选中选项后自动关闭下拉，可选配置
    onChange: function(option, checked) {
      if (checked) {
        $(option).closest('.btn-group').find('.multiselect').dropdown('toggle');
      }
    }
  });

  // 回填之前暂存的选中值，如需清空选中值可跳过该步骤
  if (selectedVal && selectedVal.length > 0) {
    // 单选模式下取第一个选中值即可
    $(".select-drp").val(selectedVal[0]);
    $(".select-drp").multiselect('refresh');
  }
}

// 若后续需要切回多选，执行反向逻辑即可
const switchSelectToMulti = function() {
  const selectedVal = $(".select-drp").val();
  $(".select-drp").multiselect('destroy');
  $(".select-drp").attr('multiple', 'multiple');
  // 用原多选配置初始化
  $(".select-drp").multiselect({
    nonSelectedText: '请选择',
    numberDisplayed: 3
  });
  if (selectedVal) {
    $(".select-drp").val(Array.isArray(selectedVal) ? selectedVal : [selectedVal]);
    $(".select-drp").multiselect('refresh');
  }
}

注意：不要直接修改插件渲染生成的DOM结构强制实现单选效果，会导致值同步异常、点击事件错乱的问题，必须通过上述标准流程处理。

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