使用Browserify时，SweetAlert2中集成Select2多选下拉框失效问题

你的代码存在两个核心问题导致Select2无法正常工作：

• 未在弹窗渲染完成后初始化Select2组件
• 错误使用preConfirm回调（该回调触发时机是确认按钮点击前，而非弹窗打开后）

修正后的代码示例 #

Swal.fire({
  title: "Multiselect",
  position: 'center-end',
  closeOnEsc: false,
  confirmButtonText: 'submit',
  html: `<select class='js-example-basic-multiple' name='states[]' multiple='multiple'>
          <option value='AL'>Alabama</option>
          <option value='WY'>Wyoming</option>
        </select>`,
  // 弹窗渲染完成后初始化Select2
  didOpen: () => {
    $('.js-example-basic-multiple').select2({
      width: '100%' // 适配弹窗宽度，避免布局错乱
    });
  },
  preConfirm: () => {
    // 获取Select2选中的多选值
    const selectedItems = $('.js-example-basic-multiple').val();
    console.log('选中项:', selectedItems);
    // 返回选中值供后续业务逻辑使用
    return selectedItems;
  }
});

关键注意事项 #

• 回调时机：必须用didOpen回调初始化Select2，此时弹窗DOM已完全渲染，Select2才能正确识别目标元素
• Browserify环境校验：确保jQuery（Select2依赖）和Select2都已通过Browserify正确引入到项目中
• 样式适配：给Select2添加width: '100%'配置，让下拉框自动适配SweetAlert2弹窗宽度
• 值的获取：通过Select2的val()方法获取多选选中值，而非直接操作原生select元素

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