移除Bootstrap Multiselect多选属性并启用单选功能

嗨，我懂你遇到的问题了——直接移除原生select的multiple属性根本没用，因为bootstrap-multiselect插件已经把原生下拉框隐藏起来，换成了它自己定制的按钮和复选框菜单。要切换多选/单选状态，得通过插件的API来销毁旧实例、修改原生属性，再重新初始化才行。

我给你整理了完整的解决方案，包括处理多个下拉框（还有你提到的动态生成的那些），甚至能保留切换前选中的选项：

核心思路 #

• 切换原生select的multiple属性（实现多选↔单选的基础状态切换）
• 销毁当前的multiselect插件实例，恢复原生select的可操作状态
• 根据新的multiple属性重新初始化插件，配置对应的单选/多选规则
• （可选）恢复切换前选中的选项，避免用户操作丢失选择

完整代码示例 #

首先是按钮的点击事件处理逻辑：

$("#button").click(function(){
  // 遍历所有带multiselect类的下拉框（包括页面初始加载和动态生成的）
  $(".multiselect").each(function(){
    const $select = $(this);
    // 保存当前选中的选项，切换后恢复
    const selectedValues = $select.val();
    // 判断当前是否处于多选模式
    const isCurrentlyMultiple = $select.attr("multiple") !== undefined;

    // 切换原生select的multiple属性
    if (isCurrentlyMultiple) {
      $select.removeAttr("multiple");
    } else {
      $select.attr("multiple", "multiple");
    }

    // 销毁现有multiselect实例，恢复原生select显示
    $select.multiselect('destroy');

    // 重新初始化插件，根据当前状态配置参数
    $select.multiselect({
      // 单选模式下限制最多选1个，多选模式取消限制
      maxSelected: isCurrentlyMultiple ? false : 1,
      // 只有多选模式才显示"全选"选项
      includeSelectAllOption: !isCurrentlyMultiple,
      // 可以添加你原来的其他初始化配置，比如占位符
      placeholder: "请选择选项"
    });

    // 恢复之前选中的选项
    if (selectedValues) {
      $select.val(selectedValues).multiselect('refresh');
    }
  });
});

动态生成下拉框的适配处理 #

针对你提到的“顶部非多选select选中后动态生成下拉框”的场景，生成新的select后要按默认多选模式初始化插件：

// 示例：动态生成多选下拉框的函数
function generateDynamicSelect() {
  // 创建新的多选select元素
  const $newSelect = $('<select name="dynamic[]" multiple="multiple" class="multiselect"></select>');
  
  // 给新select添加选项（可根据业务逻辑动态生成）
  $newSelect.append('<option value="1">选项1</option>');
  $newSelect.append('<option value="2">选项2</option>');
  $newSelect.append('<option value="3">选项3</option>');
  
  // 将新select添加到页面容器中
  $(".row").append($newSelect);
  
  // 按多选模式初始化multiselect插件
  $newSelect.multiselect({
    includeSelectAllOption: true,
    placeholder: "请选择选项"
  });
}

关键说明 #

• multiselect('destroy')是核心：它会清除插件生成的所有自定义UI，把原生select恢复显示，这样我们修改的multiple属性才能被插件识别。
• maxSelected: 1：强制单选模式，即使原生select没有multiple属性，插件也会限制只能选一个选项，避免用户误操作多选。
• 遍历.multiselect类：不管是页面初始加载的还是动态生成的下拉框，只要带有这个类，都会被统一处理。

这样操作后，点击按钮就能在多选和单选模式之间无缝切换啦！

内容的提问来源于Stack Exchange，提问作者Mahantesh